<template>
  <div class="container">
    <div class="main" v-show="!isShow">
      <div class="left-content">
        <div class="item-content" style="height: 415px; margin: 40px">
          <div class="item-title">
            <div class="title">桥区概览</div>
          </div>
          <div class="flex" style="margin-top: 8px">
            <div class="item" style="width: 49%; margin-right: 2%">
              <div class="top">
                <div class="title">整体情况</div>
                <div class="shimmer-container">
                  <slot></slot>
                </div>
              </div>

              <div class="part">
                <div class="left-part">
                  <div class="left-part-item" style="margin: 31px 0px">
                    <div class="img-icon">
                      <img src="../assets/images/big-screen/img-icon-one.png" alt="" />
                    </div>
                    <div class="count">
                      <div class="name">航道里程数(公里)</div>
                      <div class="value">{{animatedValues.hdMile1.toFixed(0) || "--" }}</div>
                    </div>
                  </div>
                  <div class="left-part-item">
                    <div class="img-icon">
                      <img src="../assets/images/big-screen/img-icon-two.png" alt="" />
                    </div>
                    <div class="count">
                      <div class="name">桥梁数量(座)</div>
                      <div class="value">
                        {{ animatedValues.totalBridge1.toFixed(0) || "--" }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right-part">
                  <div class="part-item">
                    <div>
                      <div class="name">高等级</div>
                      <div class="value">
                        {{ animatedValues.hdHighLevel1.toFixed(0) || "--" }}
                      </div>
                    </div>
                    <div>
                      <div class="name">等级</div>
                      <div class="value">
                        {{animatedValues.hdOtherLeve1.toFixed(0) || "--" }}
                      </div>
                    </div>
                  </div>
                  <div class="part-item">
                    <div>
                      <div class="name">高等级航道</div>
                      <div class="value">
                        {{ animatedValues.bgHighLevel1.toFixed(0) || "--" }}
                      </div>
                    </div>
                    <div>
                      <div class="name">等级航道</div>
                      <div class="value">
                        {{ animatedValues.bgOtherLevel1.toFixed(0) || "--" }}
                      </div>
                    </div>
                  </div>
                  <div class="part-item1">
                    <div>
                      <div class="name">高等级航道</div>
                      <div class="value" style="color: #28ce8e">
                        {{ animatedValues.bgDabiaoHighLevel1.toFixed(0) || "--"
                        }}<span style="font-size: 14px">（净空达标）</span>
                      </div>
                    </div>
                    <div>
                      <div class="name">高等级航道</div>
                      <div class="value" style="color: #F86220">
                        {{ animatedValues.bgNoDabiaoHighLevel1.toFixed(0) || "--"
                        }}<span style="font-size: 14px">（净空不达标）</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="width: 49%">
              <div class="top">
                <div class="title">隐患桥梁情况</div>
                <div class="shimmer-container">
                  <slot></slot>
                </div>
              </div>
              <div style="display: flex">
                <div class="bridge-accident" style="width: 58%; margin-right: 2%">
                  <div class="scroll-container">
                    <div v-if="cityDivisionData.length">
                      <div class="bridge-accident-item" v-for="(item, index) in cityDivisionData" :key="index">
                        <div class="top-part">
                          <div class="name">{{ item.city }}</div>
                          <div class="value">{{ item.cityNumber }}</div>
                        </div>
                        <div class="bottom-part">
                          <div class="custom-progress">
                            <div class="progress-bar" :style="{
                  width: item.cityNumber + '%',
                  background: 'linear-gradient(270deg, rgba(120, 223, 255, 0.2) 0%, #78DFFF 100%)'
                }"></div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="no-data" v-else>暂无数据</div>
                  </div>
                </div>
                <div class="watershed" style="width: 40%">
                  <div class="watershed-title">按流域划分</div>
                  <div id="ninth-chart" style="height: 240px"></div>
                </div>
              </div>
            </div>
            <!-- <div class="item" style="width: 49%;">
              <div class="top">
                <div class="title">事故桥梁情况</div>
                <el-select
                  v-model="accident"
                  placeholder="请选择"
                  @change="accidentChange()"                   
                >
                  <el-option
                    v-for="item in accidentOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="bridge-accident">
                <div v-if="accidentData.length">
                  <div class="bridge-accident-item" v-for="(item,index) in accidentData" :key="index">
                    <div class="top-part">
                      <div class="name">{{ item.name }}</div>
                      <div class="value">{{ item.value }}</div>
                    </div>
                    <div class="bottom-part">
                      <el-progress :percentage="item.progress" color="#78DFFF" :show-text="false"></el-progress>
                    </div>
                  </div>
                </div>
                <div class="no-data" v-else>暂无数据</div>
              </div>              
            </div> -->
          </div>
        </div>
        <div class="item-content" style="height: 625px; margin: 0px 40px 40px 40px">
          <div class="item-title">
            <div class="title">桥区日常管理</div>
            <div style="display: flex; align-items: center">
              <el-select v-model="bridge" filterable placeholder="请选择" style="width: 215px" @change="bridgeChange">
                <el-option v-for="item in bridgeOptions" :key="item.name" :label="item.name" :value="item.name" />
              </el-select>
              <el-radio-group v-model="radio" style="margin: 0 20px">
                <el-radio-button label="桥梁信息" value="桥梁信息" />
                <el-radio-button label="桥区航道" value="桥区航道" />
                <el-radio-button label="船舶通航" value="船舶通航" />
              </el-radio-group>
            </div>
          </div>
          <div class="flex" v-show="radio === '桥梁信息'">
            <div class="item" style="margin: 0px 1.33% 20px 0px">
              <div class="top1">
                <div class="title">基本信息</div>
              </div>
              <div class="bridge-img">
                <img :src="picUrl" v-if="picUrl" @error="imgError" />
                <div class="no-img" v-else>
                  <img src="../assets/images/big-screen/no-data.png" />
                  <div>暂无图片</div>
                </div>
              </div>
              <div class="base-info">
                <div class="left-info">
                  <div class="name">
                    {{ bridgeBaseInfoData.bridgeName || "--" }}
                  </div>
                  <div class="address">
                    地理位置：{{ bridgeBaseInfoData.cAddress || "--" }}
                  </div>
                </div>
                <div class="right-info">
                  <div class="name">净高是否达标：</div>
                  <div class="value" :style="
                      bridgePortraitData?.isDabiao === '不达标'
                        ? 'color:#F13939;'
                        : ''
                    ">
                    {{ bridgePortraitData?.isDabiao || "--" }}
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 20px 0px">
              <div class="top1">
                <div class="title">通航孔</div>
                <div class="tips">国家1985高程基准</div>
              </div>
              <div class="hole-count">
                <div class="hole-item">
                  <div class="name">单向/双向通行</div>
                  <div class="value" v-if="tonghangkong.length">
                    {{ tonghangkong[0]?.tonghangkGz || "--" }}/{{
                      tonghangkong[1]?.tonghangkGz || "--"
                    }}
                  </div>
                  <div class="value" v-else>--/--</div>
                </div>
                <div class="hole-item">
                  <div class="name">通航孔数量</div>
                  <div class="value">
                    {{ bridgeHoleData.tonghangnum || "--" }}个
                  </div>
                </div>
                <div class="hole-item">
                  <div class="name">设计最高通航水位</div>
                  <div class="value">
                    {{ bridgeHoleData.shejizuigao || "--" }}m
                  </div>
                </div>
                <div class="hole-item">
                  <div class="name">实时通航净高</div>
                  <div class="value">
                    {{ bridgeHoleData.shicetongh || "--" }}m
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 20px 0px">
              <div class="top1">
                <div class="title">桥区船舶密度</div>
                <!-- <div class="tips">数据时间：xxxx年xx月xx日</div> -->
              </div>
              <div id="first-chart" style="height: 220px; width: 480px"></div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px">
              <div class="top1">
                <div class="title">水位情况</div>
                <div class="tips">国家1985高程基准</div>
              </div>
              <div class="water-details">
                <div class="top-details">
                  <el-select v-model="water" placeholder="请选择" style="width: 180px" @change="waterPredictFn()">
                    <el-option v-for="item in waterOptions" :key="item.name" :label="item.name" :value="item.name" />
                  </el-select>
                  <div class="update-time">
                    更新时间：{{ bgWaterSitData?.time || "--" }}
                  </div>
                </div>
                <div class="bottom-details">
                  <div class="water-value">
                    实时水位：{{ bgWaterSitData?.swz || "--" }}米
                  </div>
                  <div class="count">
                    <div class="count-item">
                      <div class="name">较上月最高(米)</div>
                      <div class="value" :style="
                          nLastmonthHighWater
                            ? nLastmonthHighWater > 0
                              ? 'color:#28CE8E'
                              : 'color:#F86220'
                            : 'color:#FFFFFF'
                        ">
                        {{ animatedValues ? nLastmonthHighWater1?.toFixed(0) : "--" }}
                        <img src="../assets/images/big-screen/down-sanjiao.png" v-show="
                            nLastmonthHighWater && nLastmonthHighWater > 0
                          " />
                        <img src="../assets/images/big-screen/top-sanjiao.png" v-show="
                            nLastmonthHighWater && nLastmonthHighWater < 0
                          " />
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">较去年最高(米)</div>
                      <div class="value" :style="
                          nLastyearHighWater
                            ? nLastyearHighWater > 0
                              ? 'color:#28CE8E'
                              : 'color:#F86220'
                            : 'color:#FFFFFF'
                        ">
                        {{animatedValues? nLastyearHighWater1?.toFixed(0) : "--" }}
                        <img src="../assets/images/big-screen/down-sanjiao.png"
                          v-show="nLastyearHighWater && nLastyearHighWater > 0" />
                        <img src="../assets/images/big-screen/top-sanjiao.png"
                          v-show="nLastyearHighWater && nLastyearHighWater < 0" />
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">较历史最高(米)</div>
                      <div class="value" :style="
                          nHisHighWater
                            ? nHisHighWater > 0
                              ? 'color:#28CE8E'
                              : 'color:#F86220'
                            : 'color:#FFFFFF'    
                        ">
                        {{animatedValues ? nHisHighWater1?.toFixed(0) : "--" }}
                        <img src="../assets/images/big-screen/down-sanjiao.png"
                          v-show="nHisHighWater && nHisHighWater > 0" />
                        <img src="../assets/images/big-screen/top-sanjiao.png"
                          v-show="nHisHighWater && nHisHighWater < 0" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px">
              <div class="top1">
                <div class="title">预警情况</div>
                <div style="display: flex; align-items: center">
                  <div class="tips">国家1985高程基准</div>
                  <el-radio-group v-model="radio8" style="margin-left: 10px">
                    <el-radio-button label="偏航" value="偏航" />
                    <el-radio-button label="超高" value="超高" />
                    <el-radio-button label="超速" value="超速" />
                  </el-radio-group>
                </div>
              </div>
              <div id="second-chart1" style="height: 220px; width: 488px; position: relative" v-show="radio8 === '偏航'">
              </div>
              <div id="second-chart2" style="height: 220px; width: 488px; position: relative" v-show="radio8 === '超高'">
              </div>
              <div id="second-chart3" style="height: 220px; width: 488px; position: relative" v-show="radio8 === '超速'">
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px">
              <div class="top1">
                <div class="title">图纸/方案</div>
                <!-- <el-radio-group v-model="radio1">
                  <el-radio-button label="设计图纸" value="设计图纸" />
                  <el-radio-button label="一桥一方案" value="一桥一方案" />                                            
                </el-radio-group>  -->
              </div>
              <div class="blueprint">
                <div class="num">
                  <div class="num-item">
                    <div class="name">设计图纸(份)</div>
                    <div class="value">{{ bgElevationData.num }}</div>
                  </div>
                  <div class="num-item">
                    <div class="name">一桥一方案</div>
                    <div class="more" @click="viewPlan" v-if="planUrl">
                      查看
                    </div>
                    <div class="no" v-else>暂无</div>
                  </div>
                </div>
                <div class="blueprint-part">
                  <img src="../assets/images/big-screen/bridge-bg.png" />
                </div>
              </div>
            </div>
          </div>
          <div class="flex" v-show="radio === '桥区航道'">
            <div class="item" style="margin: 0px 1.33% 20px 0px">
              <div class="top1">
                <div class="title">基本信息</div>
              </div>
              <div class="bridge-img">
                <img :src="picUrl" v-if="picUrl" />
                <div class="no-img" v-else>
                  <img src="../assets/images/big-screen/no-data.png" />
                  <div>暂无图片</div>
                </div>
              </div>
              <div class="base-info">
                <div class="left-info">
                  <div class="name">
                    {{ waterwayBaseInfoData.channelName || "--" }}
                  </div>
                  <div class="address">
                    航标总数：{{ waterwayBaseInfoData.hbNum || "--" }}
                  </div>
                </div>
                <div class="right-info">
                  <div class="value" style="color: #78dfff">
                    {{ waterwayBaseInfoData.cWeihudj || "--" }}级
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 20px 0px">
              <div class="top1">
                <div class="title">维护情况</div>
              </div>
              <div class="maintenance">
                <div class="maintenance-item">
                  <div class="img">
                    <img src="../assets/images/big-screen/img-icon-three.png" alt="" />
                  </div>
                  <div>
                    <div class="name">维护水深(米)</div>
                    <div class="value">
                      {{ animatedValues.weihuDeep1.toFixed(0) || "--" }}
                    </div>
                  </div>
                </div>
                <div class="maintenance-item">
                  <div class="img">
                    <img src="../assets/images/big-screen/img-icon-five.png" alt="" />
                  </div>
                  <div>
                    <div class="name">维护弯曲半径(米)</div>
                    <div class="value">
                      {{  animatedValues.wanquRadius1.toFixed(0) || "--" }}
                    </div>
                  </div>
                </div>
                <div class="maintenance-item">
                  <div class="img">
                    <img src="../assets/images/big-screen/img-icon-four.png" alt="" />
                  </div>
                  <div>
                    <div class="name">维护宽度(米)</div>
                    <div class="value">
                      {{  animatedValues.weihuWeigth1.toFixed(0) || "--" }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 20px 0px">
              <div class="top1">
                <div class="title">水位情况</div>
                <div class="tips">国家1985高程基准</div>
              </div>
              <div class="water-details">
                <div class="top-details">
                  <el-select v-model="water1" placeholder="请选择" style="width: 180px" @change="waterChange1">
                    <el-option v-for="item in waterOptions1" :key="item.point" :label="item.point"
                      :value="item.point" />
                  </el-select>
                  <div class="update-time">
                    更新时间：{{ getNewWaterData?.time }}
                  </div>
                </div>
                <div class="bottom-details">
                  <div class="water-value">
                    实时水位：{{ getNewWaterData?.swz }}米
                  </div>
                  <div class="count">
                    <div class="count-item">
                      <div class="name">较上月最高(米)</div>
                      <div class="value" :style="
                          nLastmonthHighWater1
                            ? nLastmonthHighWater1 > 0
                              ? 'color:#28CE8E'
                              : 'color:#F86220'
                            : 'color:#FFFFFF'
                        ">
                        {{ nLastmonthHighWater1 ? nLastmonthHighWater1 : "--" }}
                        <img src="../assets/images/big-screen/down-sanjiao.png" v-show="
                            nLastmonthHighWater1 && nLastmonthHighWater1 > 0
                          " />
                        <img src="../assets/images/big-screen/top-sanjiao.png" v-show="
                            nLastmonthHighWater1 && nLastmonthHighWater1 < 0
                          " />
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">较去年最高(米)</div>
                      <div class="value" :style="
                          nLastyearHighWater1
                            ? nLastyearHighWater1 > 0
                              ? 'color:#28CE8E'
                              : 'color:#F86220'
                            : 'color:#FFFFFF'
                        ">
                        {{ nLastyearHighWater1 ? nLastyearHighWater1 : "--" }}
                        <img src="../assets/images/big-screen/down-sanjiao.png" v-show="
                            nLastyearHighWater1 && nLastyearHighWater1 > 0
                          " />
                        <img src="../assets/images/big-screen/top-sanjiao.png" v-show="
                            nLastyearHighWater1 && nLastyearHighWater1 < 0
                          " />
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">较历史最高(米)</div>
                      <div class="value" :style="
                          nHisHighWater1
                            ? nHisHighWater1 > 0
                              ? 'color:#28CE8E'
                              : 'color:#F86220'
                            : 'color:#FFFFFF'
                        ">
                        {{ nHisHighWater1 ? nHisHighWater1 : "--" }}
                        <img src="../assets/images/big-screen/down-sanjiao.png"
                          v-show="nHisHighWater1 && nHisHighWater1 > 0" />
                        <img src="../assets/images/big-screen/top-sanjiao.png"
                          v-show="nHisHighWater1 && nHisHighWater1 < 0" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px">
              <div class="top1">
                <div class="title">巡检情况</div>
              </div>
              <div class="inspect">
                <div class="img">
                  <img src="../assets/images/big-screen/img-icon-six.png" alt="" />
                </div>
                <div>
                  <div class="name">巡检里程数(公里)</div>
                  <div class="value">{{ channelInspectionData.xcMile }}</div>
                </div>
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px">
              <div class="top1">
                <div class="title">船舶流量</div>
              </div>
              <div class="flowed">
                <div class="top-part">
                  <div class="count-item">
                    <div class="first-color"></div>
                    <div class="name">
                      3000吨以上船舶
                    </div>
                    <div class="value">{{animatedValues.dayu1.toFixed(0) || "--" }}</div>
                  </div>
                  <div class="count-item">
                    <div class="first-color1"></div>
                    <div class="name">3000吨以下船舶</div>
                    <div class="value">{{ animatedValues.xiaoyu1.toFixed(0) || "--" }}</div>
                  </div>
                </div>
                <div class="bottom-part" v-if="hdCbllData.name">
                  观测点：{{ hdCbllData.name }}
                </div>
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px">
              <div class="top1">
                <div class="title">关联桥梁</div>
              </div>
              <div class="correlation">
                <div class="value">{{animatedValues.num1.toFixed(0) || "--" }}座</div>
              </div>
            </div>
          </div>
          <div class="flex" v-show="radio === '船舶通航'">
            <div class="item" style="width: 49%; height: 238px; margin-right: 2%">
              <div class="top">
                <div class="title">船舶总体态势分析</div>
                <el-radio-group v-model="radio2" @change="radio2Change">
                  <el-radio-button label="当日" value="当日" />
                  <el-radio-button label="当周" value="当周" />
                  <el-radio-button label="当月" value="当月" />
                  <el-radio-button label="当年" value="当年" />
                </el-radio-group>
              </div>
              <div style="display: flex; align-items: center">
                <div class="ship-count">
                  <div class="ship-count-item">
                    <div class="name">船舶总数(艘)</div>
                    <div class="value">{{ totalShip }}</div>
                  </div>
                  <div class="ship-count-item">
                    <div class="name">船舶总载货吨(万吨)</div>
                    <div class="value">{{ totalShipLoad }}</div>
                  </div>
                </div>
                <div id="third-chart" style="height: 190px; width: 400px"></div>
              </div>
            </div>
            <div class="item" style="width: 49%; height: 238px">
              <div class="top">
                <div class="title">船舶流量态势分析</div>
                <el-radio-group v-model="radio3" @change="shipllAnalysFn">
                  <el-radio-button label="日" value="日" />
                  <el-radio-button label="周" value="周" />
                  <el-radio-button label="月" value="月" />
                  <el-radio-button label="年" value="年" />
                </el-radio-group>
                <el-select popper-class="custom-select-dropdown" v-model="count" placeholder="请选择"
                  style="margin: 0 20px;width: 280px;" @change="shipllAnalysFn">
                  <el-option v-for="item in countOptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
              </div>
              <div id="fourth-chart" style="height: 190px; width: 860px; position: relative">
                <div id="no-data4" class="no-data">
                  <img src="../assets/images/big-screen/no-data.png" />
                  <div class="text">暂无数据</div>
                </div>
              </div>
            </div>
            <div class="item" style="width: 49%; height: 238px; margin-right: 2%">
              <div class="top">
                <div class="title">观测船舶流量趋势及预测图</div>
                <el-radio-group v-model="radio4" @change="shipTrendFn('流量')">
                  <el-radio-button label="日" value="日" />
                  <el-radio-button label="月" value="月" />
                </el-radio-group>
              </div>
              <div id="fifth-chart" style="height: 236px; width: 760px"></div>
            </div>
            <div class="item" style="width: 49%; height: 238px">
              <div class="top">
                <div class="title">观测船舶吨位趋势及预测图</div>
                <el-radio-group v-model="radio5" @change="shipTrendFn('吨位')">
                  <el-radio-button label="日" value="日" />
                  <el-radio-button label="月" value="月" />
                </el-radio-group>
              </div>
              <div id="sixth-chart" style="height: 236px; width: 760px"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="middle-content">
        <OlArc ref="OlArcRef" @updateBridge="handleUpdateBridge"></OlArc>
        <div class="special-topic">
          <div class="topic" @click="
              router.push({
                path: '/traffic-channel/szsy/big-screen/bigScreen',
              })
            ">
            数字水运
          </div>
          <div class="topic" @click="
              router.push({
                path: '/traffic-channel/szsy/big-screen/bigScreenZhaba',
              })
            ">
            闸坝智能调度与安全监测
          </div>
          <div class="topic-active">水上桥区管控</div>
          <div class="topic" @click="isShow = true">琼州海峡保畅通系统联动</div>
        </div>
        <div class="legend bigsize-magic-border">
          <div class="legend-item">
            <img src="../assets/images/big-screen/jg-budabiao.png" alt="" />
            <div>净高不达标桥梁</div>
          </div>
          <div class="legend-item">
            <img src="../assets/images/big-screen/jg-dabiao.png" alt="" />
            <div>净高达标桥梁</div>
          </div>
          <div class="legend-item">
            <img src="../assets/images/big-screen/hidden-trouble.png" alt="" />
            <div>隐患桥梁</div>
          </div>
          <div class="legend-item">
            <img src="../assets/images/big-screen/high-terminal.png" alt="" />
            <div>桥梁净高终端</div>
          </div>
        </div>
        <div class="count bigsize-magic-border">
          <div class="count-item" style="margin-right: 26px">
            <div class="name">航道里程路(公里)</div>
            <div class="value">{{ bgAndWyData.hdMile || "--" }}</div>
          </div>
          <div class="count-item">
            <div class="name">桥梁数量(座)</div>
            <div class="value">{{ bgAndWyData.totalBridge || "--" }}</div>
          </div>
        </div>
        <div class="filter bigsize-magic-border" :class="{'expanded': isShowFilter, 'collapsed': !isShowFilter}">
          <div class="filter-title" @click="isShowFilter = !isShowFilter">
            <div>筛选</div>
            <img src="../assets/images/big-screen/icon-shouqi.png" v-if="!isShowFilter" />
            <img src="../assets/images/big-screen/icon-zhankai.png" v-else />
          </div>
          <div v-show="isShowFilter">
            <div class="filter-item">
              <el-checkbox v-model="checkAll1" :indeterminate="isIndeterminate1" @change="handleCheckAllChange1">
                内河高等级航道
              </el-checkbox>
              <el-checkbox-group v-model="checkedValues1" @change="handleCheckedChange1"
                style="display: flex; flex-direction: column; margin-left: 20px">
                <el-checkbox v-for="item in options1" :key="item" :label="item" :value="item">
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="checkAll2" :indeterminate="isIndeterminate2" @change="handleCheckAllChange2">
                内河4-7等级航道
              </el-checkbox>
              <el-checkbox-group v-model="checkedValues2" @change="handleCheckedChange2"
                style="display: flex; flex-direction: column; margin-left: 20px">
                <el-checkbox v-for="item in options2" :key="item" :label="item" :value="item">
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="nhdwhd" @change="handleSure">
                内河等外航道
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="checkAll3" :indeterminate="isIndeterminate3" @change="handleCheckAllChange3">
                通航净高达标情况
              </el-checkbox>
              <el-checkbox-group v-model="checkedValues3" @change="handleCheckedChange3"
                style="display: flex; flex-direction: column; margin-left: 20px">
                <el-checkbox v-for="item in options3" :key="item" :label="item" :value="item">
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="checkAll4" :indeterminate="isIndeterminate4" @change="handleCheckAllChange4">
                事故桥梁
              </el-checkbox>
              <el-checkbox-group v-model="checkedValues4" @change="handleCheckedChange4"
                style="display: flex; flex-direction: column; margin-left: 20px">
                <el-checkbox v-for="item in options4" :key="item" :label="item" :value="item">
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="hiddenTrouble" @change="hiddenTroubleFn">
                隐患桥梁
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="highTerminal" @change="highTerminalFn">
                桥梁净高终端
              </el-checkbox>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="item-content" style="height: 520px; margin: 40px">
          <div class="item-title">
            <div class="title">中山先行示范区</div>
            <el-select v-model="bridge1" filterable placeholder="请选择" style="width: 214px" @change="bridgeChange1">
              <el-option v-for="item in bridgeOptions1" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </div>
          <div class="flex">
            <div class="item" style="width: 27%; margin-right: 20px">
              <div class="top1">
                <div class="title">桥梁基本信息</div>
              </div>
              <div class="base-info">
                <div class="bridge-img">
                  <img :src="picUrl1" v-if="picUrl1" @error="imgError1" />
                  <div class="no-img" v-else>
                    <img src="../assets/images/big-screen/no-data.png" />
                    <div>暂无图片</div>
                  </div>
                </div>
                <div class="bridge-name">
                  {{ bridgeBaseInfoData1?.bridgeName || "--" }}
                </div>
                <div class="channel-info">
                  <div>
                    所属航道：{{ bridgeBaseInfoData1?.cHangdao || "--" }}
                  </div>
                  <div>{{ bridgeBaseInfoData1?.cAddress || "--" }}</div>
                </div>
                <div class="condition">
                  <div class="condition-item">
                    通航净宽
                    <img src="../assets/images/big-screen/dabiao-icon.png" v-if="wide === '是'" />
                    <img src="../assets/images/big-screen/budabiao-icon.png" v-else />
                  </div>
                  <div class="condition-item">
                    通航净高
                    <img src="../assets/images/big-screen/dabiao-icon.png" v-if="high === '是'" />
                    <img src="../assets/images/big-screen/budabiao-icon.png" v-else />
                  </div>
                  <div class="condition-item">
                    设标情况
                    <img src="../assets/images/big-screen/dabiao-icon.png" v-if="shebiao === '是'" />
                    <img src="../assets/images/big-screen/budabiao-icon.png" v-else />
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="width: 39.66%; margin-right: 20px">
              <div class="top1">
                <div class="title">航保信息</div>
                <el-radio-group v-model="radio6">
                  <el-radio-button label="通航孔" value="通航孔" />
                  <el-radio-button label="预警情况" value="预警情况" />
                  <el-radio-button label="水位情况" value="水位情况" />
                  <el-radio-button label="风速情况" value="风速情况" />
                  <el-radio-button label="能见度情况" value="能见度情况" />
                </el-radio-group>
              </div>
              <div class="hole-info" v-show="radio6 == '通航孔'">
                <div class="hole-item">
                  <div class="name">单向/双向通行</div>
                  <div class="value" v-if="tonghangkong1.length">
                    {{ tonghangkong1[0]?.tonghangkGz || "--" }}/{{
                      tonghangkong1[1]?.tonghangkGz || "--"
                    }}
                  </div>
                  <div class="value" v-else>--/--</div>
                </div>
                <div class="hole-item">
                  <div class="name">通航孔数量</div>
                  <div class="value">
                    {{ bridgeHoleData1.tonghangnum || "--" }}个
                  </div>
                </div>
                <div class="hole-item">
                  <div class="name">设计最高通航水位</div>
                  <div class="value">
                    {{ bridgeHoleData1.shejizuigao || "--" }}m
                  </div>
                </div>
                <div class="hole-item">
                  <div class="name">实时通航净高</div>
                  <div class="value">
                    {{ bridgeHoleData1.shicetongh || "--" }}m
                  </div>
                </div>
                <div class="tips">国家1985高程基准</div>
              </div>
              <div class="warning-situation" v-show="radio6 == '预警情况'">
                <div class="situation-item">
                  <div class="value">{{ yawStatisticsData1.chaogaoAlarm }}</div>
                  <img src="../assets/images/big-screen/warning-bg.png" alt="" />
                  <div class="name">超高统计</div>
                </div>
                <div class="situation-item">
                  <div class="value">{{ yawStatisticsData1.chaosuAlarm }}</div>
                  <img src="../assets/images/big-screen/warning-bg.png" alt="" />
                  <div class="name">超速统计</div>
                </div>
                <div class="situation-item">
                  <div class="value">
                    {{ yawStatisticsData1.pianhangAlarm }}
                  </div>
                  <img src="../assets/images/big-screen/warning-bg.png" alt="" />
                  <div class="name">偏航统计</div>
                </div>
              </div>
              <div class="water-situation" v-show="radio6 == '水位情况'">
                <div class="water-item">
                  <img src="../assets/images/big-screen/water-level-icon.png" alt="" />
                  <div>
                    <div class="name">实时水位(m)</div>
                    <div class="value">
                      <span>{{ bgWaterSitData1.swz || "--" }}</span>
                      <span class="actual">实时</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="water-situation" v-show="radio6 == '风速情况'">
                <div id="lineChart1" style="width: 480px; height: 350px"></div>
              </div>
              <div class="water-situation" v-show="radio6 == '能见度情况'">
                <div id="lineChart2" style="width: 480px; height: 350px"></div>
              </div>
            </div>
            <div class="item" style="width: 33.33%">
              <div class="top1">
                <div class="title">通航情况</div>
                <el-select v-model="count1" placeholder="请选择" style="width: 150px" @change="shipllAnalysFn1">
                  <el-option v-for="item in countOptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
                <el-radio-group v-model="radio7" @change="shipllAnalysFn1">
                  <el-radio-button label="日" value="日" />
                  <el-radio-button label="周" value="周" />
                  <el-radio-button label="月" value="月" />
                  <el-radio-button label="年" value="年" />
                </el-radio-group>
              </div>
              <div id="seventh-chart" style="height: 380px; width: 100%; position: relative">
                <div id="no-data">
                  <img src="../assets/images/big-screen/no-data.png" />
                  <div class="text">暂无数据</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item-content" style="height: 520px; margin: 0px 40px 40px 40px">
          <div class="item-title">
            <div class="title">事故案例情况</div>
          </div>
          <div class="flex">
            <div class="item" v-show="!showAccidentList" style="width: 49%; margin-right: 2%">
              <div class="top">
                <div class="title">
                  辖区事故概况
                  <el-tooltip effect="dark" placement="bottom"
                    :content="'事故等级根据人员伤亡数量和污染数量根据以下标准自动生成(后续执法人员可结合实际经济损失在事故报告中进行修改)：\n(一)特别重大事故，指造成30人以上死亡(含失踪)的，或者100人以上重伤的，或者船舶溢油1000吨以上致水域污染的，或者1亿元以上直接经济损失的事故；\n(二)重大事故，指造成10人以上30人以下死亡(含失踪)的，或者50人以上100人以下重伤的，或者船舶溢油500吨以上1000吨以下致水域污染的，或者5000万元以上1亿元以下直接经济损失的事故；\n(三)较大事故，指造成3人以上10人以下死亡(含失踪)的,或者10人以上50人以下重伤的，或者船舶溢油100吨以上500吨以下致水域污染的，或者1000万元以上5000万元以下直接经济损失的事故；\n(四)一般事故，指造成1人以上3人以下死亡(含失踪)的，或者1人以上10人以下重伤的或者船舶溢油1吨以上100吨以下致水域污染的，或者100万元以上1000万元以下直接经济损失的事故。'">
                    <img src="../assets/images/big-screen/tips.png" alt="" />
                  </el-tooltip>
                </div>
                <el-select v-model="year" placeholder="请选择" @change="yearChange" style="width: 214px">
                  <el-option v-for="item in yearOptions" :key="item.year" :label="item.year" :value="item.year" />
                </el-select>
              </div>
              <div class="recently">
                最近事故时间：<span>{{ recentTime }}</span>
              </div>
              <div id="eighth-chart" style="height: 300px; width: 100%" @click="showAccidentList = true"></div>
            </div>
            <div class="item" v-show="showAccidentList" style="width: 49%; margin-right: 2%">
              <div class="top">
                <div class="title">事故列表</div>
                <div class="back" @click="showAccidentList = false">
                  <img src="../assets/images/big-screen/back-btn.png" alt="" />
                </div>
              </div>
              <div class="table">
                <el-table :data="tableData">
                  <el-table-column prop="accidentBg" label="事故桥梁" />
                  <el-table-column prop="accidentShip" label="事故船舶" />
                  <el-table-column prop="accidentHd" label="事故航道" />
                  <el-table-column prop="accidentLevel" label="事故等级" />
                  <el-table-column prop="happenDate" label="发生时间" width="180" />
                </el-table>
              </div>
            </div>
            <div class="item" style="width: 49%">
              <div class="top">
                <div class="title">事故桥梁情况</div>
                <el-select v-model="accident" placeholder="请选择" @change="accidentChange()" style="width: 214px">
                  <el-option v-for="item in accidentOptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
              </div>
              <div class="bridge-accident riu">
                <div class="scroll-container">
                  <div v-if="accidentData.length">
                    <div class="bridge-accident-item" v-for="(item, index) in accidentData" :key="index">
                      <div class="top-part">
                        <div class="name">{{ item.name }}</div>
                        <div class="value">{{ item.value }}</div>
                      </div>
                      <div class="bottom-part">
                        <div class="custom-progress" style="background-color: rgba(255, 255, 255, 0.2);">
                          <el-progress :percentage="item.progress" :show-text="false"></el-progress>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="no-data" v-else>暂无数据</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-iframe" v-if="isShow">
      <!-- <iframe src="http://210.76.76.41/digital-port/big-screen/main/#/QZHX?token=e49f977c-4203-464a-92d1-50de3c1f34a5" width="5760" height="1200"></iframe> -->
      <iframe
        src="https://210.76.81.180/traffic-channel/szgktymhkb/digital-port/big-screen/main/#/QZHX?token=10b4040ca79c4661b8ace01a203c516e"
        width="5760" height="1200"></iframe>
      <div class="close-btn" @click="isShow = false">返回</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick, computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

//引入Echarts
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  GraphicComponent,
} from "echarts/components";
import { PieChart, BarChart, LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  GraphicComponent,
  PieChart,
  BarChart,
  LineChart,
  CanvasRenderer,
]);
//引入接口
import {
  getBgAndWy, //整体情况
  rammedBridge, //桥梁事故情况
  cityDivision, //隐患桥梁情况-地市划分
  regionDivision, //隐患桥梁情况-流域划分
  getBridgeList, //获取桥梁列表
  bridgeBaseInfo, //桥梁基本信息
  bridgePortrait, //净高是否达标
  bridgeWaterwayRisk, //通航孔
  bgCbmdTrand, //桥区船舶密度
  bgWaterSit, //水位情况
  waterPredict, //水位情况差值
  getBgPic, //获取桥梁图片
  bgElevation, //设计图纸
  bridgePlan, //一桥一方案
  waterwayBaseInfo, //桥区航道基本信息
  getWaterPoint, //桥区航道获取水位站点
  getNewWater, //桥区航道获取最新水位
  channelInspection, //桥区航道巡检情况
  hdCbll, //桥区航道船舶流量
  associationBg, //桥区航道关联桥梁
  shipTonAnalys, //船舶总体态势分析
  //船舶流量态势分析
  shipllAnalys,
  shipllAnalysWeek,
  shipllAnalysMonth,
  shipllAnalysYear,
  getCenterByBg, //获取事务中心
  shipTrend, //观测船舶流量、吨位趋势及预测图
  bgList, //中山先行示范区获取桥梁
  bridgePortraitZhongshan, //中山先行示范区桥梁画像
  yawStatistics, //中山先行示范区预警情况
  getYearList, //事故案例情况获取年份
  acciSit, //事故案例情况详情
  windSpeed, //风速情况
  nengjiandu, //能见度情况
} from "@/bridge-h5/utils/bridgeAreaControlApi";

//地图
import OlArc from "../components/olArcBigSizeScreen.vue";
const OlArcRef = ref(null);

import chartBg from "../assets/images/big-screen/chart-bg.png";
import errorImg from "../assets/images/big-screen/no-data.png";
//数字滚动
const animatedValues = reactive({
  hdMile1: 0,
  totalBridge1: 0,
  hdHighLevel1: 0,
  hdOtherLeve1: 0,
  bgHighLevel1: 0,
  bgOtherLevel1: 0,
  bgDabiaoHighLevel1: 0,
  bgNoDabiaoHighLevel1: 0,
  weihuDeep1: 0,
  wanquRadius1: 0,
  weihuWeigth1: 0,
  dayu1: 0,
  xiaoyu1: 0,
  num1: 0,
  nLastmonthHighWater1: 0,
  nLastyearHighWater1: 0,
  nHisHighWater1: 0,
})
// 缓动函数 - 二次缓出
const easeOutQuad = (t) => t * (2 - t);
const startAnimation = (targetValue, valueKey, duration = 2000) => {
  const startValue = animatedValues[valueKey];
  const changeValue = targetValue - startValue;
  const startTime = performance.now();

  const animate = (currentTime) => {
    const elapsedTime = currentTime - startTime;
    const progress = Math.min(elapsedTime / duration, 1);
    const easeProgress = easeOutQuad(progress);
    animatedValues[valueKey] = startValue + changeValue * easeProgress;

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  };

  requestAnimationFrame(animate);
};
//整体情况
const bgAndWyData = ref({});
const getBgAndWyFn = () => {
  getBgAndWy().then((res) => {
    if (res.code === 200 && res.data) {
      bgAndWyData.value = res.data;
      startAnimation(bgAndWyData.value.hdMile, 'hdMile1');
      startAnimation(bgAndWyData.value.totalBridge, 'totalBridge1');
      startAnimation(bgAndWyData.value.hdHighLevel, 'hdHighLevel1');
      startAnimation(bgAndWyData.value.hdOtherLevel, 'hdOtherLeve1');
      startAnimation(bgAndWyData.value.bgHighLevel, 'bgHighLevel1');
      startAnimation(bgAndWyData.value.bgOtherLevel, 'bgOtherLevel1');
      startAnimation(bgAndWyData.value.bgDabiaoHighLevel, 'bgDabiaoHighLevel1');
      startAnimation(bgAndWyData.value.bgNoDabiaoHighLevel, 'bgNoDabiaoHighLevel1');

    }
  })
};

//桥梁事故情况
const accident = ref(3);
const accidentOptions = [
  { name: "近三年被撞桥梁", value: 3 },
  { name: "近一年被撞桥梁", value: 1 },
];
const accidentData = ref([]);
const rammedBridgeFn = () => {
  rammedBridge({
    isAccident: accident.value,
  }).then((res) => {
    if (res.code === 200 && res.data.length) {
      // 使用 map 创建带唯一标识的数据数组
      const originalData = res.data.map((item, index) => {
        let obj = {
          name: item.bridgeName,
          value: item.times,
          id: `accident-${index}`, // 添加唯一ID
        };
        // 设置进度值
        if (item.times === 3) {
          obj.progress = 100;
        } else if (item.times === 2) {
          obj.progress = 66;
        } else if (item.times === 1) {
          obj.progress = 33;
        }
        return obj;
      });

      // 确保有足够数据用于滚动
      let finalData = [...originalData];

      // 如果原始数据少于10条，复制足够的次数以确保滚动效果
      if (originalData.length < 10) {
        const neededCopies = Math.ceil(10 / originalData.length);

        for (let i = 1; i < neededCopies; i++) {
          const copyWithNewIds = originalData.map((item, idx) => ({
            ...item,
            id: `accident-${i}-${idx}` // 确保复制项有唯一ID
          }));
          finalData = [...finalData, ...copyWithNewIds];
        }
      }

      accidentData.value = finalData;
      console.log('事故桥梁数据:', accidentData.value.length, '条');
    } else {
      accidentData.value = []; // 没有数据时清空
    }
  });
};
const accidentChange = () => {
  rammedBridgeFn();
};

//隐患桥梁情况
const cityDivisionData = ref([]);
const cityDivisionFn = () => {
  cityDivision().then((res) => {
    if (res.code === 200 && res.data.length) {
      // 保存原始数据，确保每个对象都有唯一的key
      const originalData = res.data.map((item, index) => ({
        ...item,
        id: `city-${index}` // 添加唯一id
      }));

      // 如果数据条数少于10条，复制多份以确保有足够的数据滚动
      if (originalData.length < 10) {
        let copies = [];
        const neededCopies = Math.ceil(10 / originalData.length);

        for (let i = 0; i < neededCopies; i++) {
          const copyWithNewIds = originalData.map((item, idx) => ({
            ...item,
            id: `city-${i}-${idx}` // 确保每个复制的项有唯一ID
          }));
          copies = [...copies, ...copyWithNewIds];
        }

        cityDivisionData.value = copies;
      } else {
        cityDivisionData.value = originalData;
      }

      console.log('城市划分数据:', cityDivisionData.value.length, '条');
    }
  });
};
const regionDivisionFn = () => {
  regionDivision().then((res) => {
    if (res.code === 200) {
      let colorData = [
        "#78DFFF",
        "#9AD4EF",
        "#309CFF",
        "#2B679D",
        "#5057FD",
        "#8083D8",
        "#5AF5D5",
        "#A6E7D9",
        "#55FE5C",
        "#9CDB9F",
        "#FFC733",
        "#FFE6A5",
        "#FE762A",
        "#F9B793",
        "#E33F3F",
        "#F48787",
        "#ED44F0",
        "#F5ABF6",
        "#41616A",
        "#ADCDD6",
      ];

      // 构建原始数据
      let originalData = res.data.map((item, index) => ({
        name: item.region,
        value: item.regionNumber,
        itemStyle: {
          color: colorData[index % colorData.length], // 使用颜色循环
        },
        id: `region-${index}` // 添加唯一标识
      }));

      // 如果数据不足10条，复制足够的数据来确保滚动效果
      let regionDivisionData = [...originalData];
      if (originalData.length < 10) {
        const neededCopies = Math.ceil(10 / originalData.length);
        for (let i = 1; i < neededCopies; i++) {
          const copyWithNewIds = originalData.map((item, idx) => ({
            ...item,
            id: `region-${i}-${idx}` // 确保复制的项有唯一ID
          }));
          regionDivisionData = [...regionDivisionData, ...copyWithNewIds];
        }
      }

      console.log('流域划分数据:', regionDivisionData.length, '条');
      initNinthChart(regionDivisionData);
    }
  });
};

//桥区日常管理
const radio = ref("桥梁信息");
const bridge = ref("北斗大桥");
const waterway = ref("沙湾水道");
const bridgeOptions = ref([]);
const getBridgeListFn = () => {
  getBridgeList().then((res) => {
    if (res.code === 200) {
      bridgeOptions.value = res.data;
      //桥梁信息
      bridgeBaseInfoFn();
      bridgePortraitFn();
      bridgeWaterwayRiskFn();
      bgCbmdTrandFn();
      bgWaterSitFn();
      getWaterOptionsFn();
      yawStatisticsFn();
      getBgPicFn();
      bgElevationFn();
      bridgePlanFn();
      //桥区航道
      waterwayBaseInfoFn();
      getWaterPointFn();
      channelInspectionFn();
      hdCbllFn();
      associationBgFn();
      //船舶通航
      shipTonAnalysFn();
      shipllAnalysFn();
      getCenterByBgFn();
    }
  });
};
const bridgeChange = () => {
  //桥梁信息
  bridgeBaseInfoFn();
  bridgePortraitFn();
  bridgeWaterwayRiskFn();
  bgCbmdTrandFn();
  bgWaterSitFn();
  getWaterOptionsFn();
  yawStatisticsFn();
  getBgPicFn();
  bgElevationFn();
  bridgePlanFn();
  //桥区航道
  bridgeOptions.value.forEach((item) => {
    if (bridge.value === item.name) {
      waterway.value = item.hangdao;
      waterwayBaseInfoFn();
      getWaterPointFn();
      channelInspectionFn();
      hdCbllFn();
      associationBgFn();
    }
  });
  //船舶通航
  shipTonAnalysFn();
  shipllAnalysFn();
  getCenterByBgFn();
};
const handleUpdateBridge = (val) => {
  bridge.value = val;
  setTimeout(() => {
    bridgeChange();
  }, 200);
};
const bridgeBaseInfoData = ref({});
const bridgeBaseInfoFn = () => {
  bridgeBaseInfo({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200) {
      bridgeBaseInfoData.value = res.data[0];
    }
  });
};
const bridgePortraitData = ref({});
const bridgePortraitFn = () => {
  bridgePortrait({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200) {
      bridgePortraitData.value = res.data[0];
    }
  });
};
const bridgeHoleData = ref({});
const tonghangkong = ref([]);
const bridgeWaterwayRiskFn = () => {
  bridgeWaterwayRisk({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200) {
      bridgeHoleData.value = res.data;
      tonghangkong.value = res.data.tonghangkong;
    }
  });
};
const bgCbmdTrandFn = () => {
  bgCbmdTrand({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200) {
      initFirstChart(res.data);
    }
  });
};
const bgWaterSitData = ref({});
const bgWaterSitFn = () => {
  bgWaterSit({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200) {
      bgWaterSitData.value = res.data[0];
    }
  });
};
const water = ref("");
const waterOptions = ref([]);
const getWaterOptionsFn = () => {
  getBridgeList({
    keyword: bridge.value,
  }).then((res) => {
    if (res.code === 200) {
      water.value = res.data[0].name;
      waterOptions.value = res.data;
      waterPredictFn();
    }
  });
};
const nLastmonthHighWater = ref(null);
const nLastyearHighWater = ref(null);
const nHisHighWater = ref(null);
const waterPredictFn = () => {
  waterPredict({
    waterway: water.value,
  }).then((res) => {
    if (res.code === 200) {
      nLastmonthHighWater.value = res.data.nLastmonthHighWater;
      nLastyearHighWater.value = res.data.nLastyearHighWater;
      nHisHighWater.value = res.data.nHisHighWater;
      startAnimation(nLastmonthHighWater.value.nLastmonthHighWater, 'nLastmonthHighWater1');
      startAnimation(nLastyearHighWater.value.nLastyearHighWater, 'nLastyearHighWater1');
      startAnimation(nHisHighWater.value.nHisHighWater, 'nHisHighWater1');
    }
  });
};
const radio8 = ref("偏航");
const yawStatisticsFn = () => {
  yawStatistics({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200) {
      initSecondChart1(res.data.pianhang);
      initSecondChart2(res.data.chaogao);
      initSecondChart3(res.data.chaosu);
    }
  });
};
const picUrl = ref("");
const getBgPicFn = () => {
  getBgPic({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200 && res.data.picUrl) {
      picUrl.value =
        `${import.meta.env.VITE_APP_BASE_API}attach` + res.data.picUrl;
    } else {
      picUrl.value = "";
    }
  });
};

const imgError = () => {
  picUrl.value = "";
};
const bgElevationData = ref({});
const bgElevationFn = () => {
  bgElevation({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200) {
      bgElevationData.value = res.data;
    }
  });
};
const planUrl = ref("");
const bridgePlanFn = () => {
  bridgePlan({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200 && res.data.url) {
      planUrl.value = `${import.meta.env.VITE_APP_BASE_API}` + res.data.url;
    } else {
      planUrl.value = "";
    }
  });
};
const viewPlan = () => {
  window.open(
    planUrl.value,
    "_blank",
    "toolbar=yes,location=yes,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=600,height=600"
  );
};
const waterwayBaseInfoData = ref({});
const waterwayBaseInfoFn = () => {
  waterwayBaseInfo({
    bridge: bridge.value,
    waterway: waterway.value,
  }).then((res) => {
    if (res.code === 200) {
      waterwayBaseInfoData.value = res.data;
      startAnimation(waterwayBaseInfoData.value.weihuDeep, 'weihuDeep1');
      startAnimation(waterwayBaseInfoData.value.wanquRadius, 'wanquRadius1');
      startAnimation(waterwayBaseInfoData.value.weihuWeigth, 'weihuWeigth1');
    }
  });
};
const water1 = ref("");
const waterOptions1 = ref([]);
const getWaterPointFn = () => {
  getWaterPoint({
    waterway: waterway.value,
  }).then((res) => {
    if (res.code === 200 && res.data.length) {
      waterOptions1.value = res.data;
      water1.value = res.data[0].point;
      getNewWaterFn();
      waterPredictFn1();
    } else {
      waterOptions1.value = [];
      water1.value = "";
    }
  });
};
const getNewWaterData = ref({});
const getNewWaterFn = () => {
  getNewWater({
    waterway: water1.value,
  }).then((res) => {
    if (res.code === 200) {
      getNewWaterData.value = res.data[0] || {};
    }
  });
};
const nLastmonthHighWater1 = ref(null);
const nLastyearHighWater1 = ref(null);
const nHisHighWater1 = ref(null);
const waterPredictFn1 = () => {
  waterPredict({
    waterway: water1.value,
  }).then((res) => {
    if (res.code === 200) {
      nLastmonthHighWater1.value = res.data.nLastmonthHighWater;
      nLastyearHighWater1.value = res.data.nLastyearHighWater;
      nHisHighWater1.value = res.data.nHisHighWater;
    }
  });
};
const waterChange1 = () => {
  getNewWaterFn();
  waterPredictFn1();
};
const channelInspectionData = ref({});
const channelInspectionFn = () => {
  channelInspection({
    waterway: waterway.value,
  }).then((res) => {
    if (res.code === 200) {
      channelInspectionData.value = res.data;
    }
  });
};
const hdCbllData = ref({});
const hdCbllFn = () => {
  hdCbll({
    waterway: waterway.value,
  }).then((res) => {
    if (res.code === 200) {
      hdCbllData.value = res.data[0] || {};
      startAnimation(hdCbllData.value.dayu, 'dayu1');
      startAnimation(hdCbllData.value.xiaoyu, 'xiaoyu1');
    }
  });
};
const associationBgData = ref({});
const associationBgFn = () => {
  associationBg({
    waterway: waterway.value,
  }).then((res) => {
    if (res.code === 200) {
      associationBgData.value = res.data;
      startAnimation(associationBgData.value.num, 'num1');
    }
  });
};

const radio1 = ref("设计图纸");
const radio2 = ref("当周");
const totalShip = ref(0);
const totalShipLoad = ref(0);
const shipTonAnalysData = ref({});
const shipTonAnalysFn = () => {
  shipTonAnalys({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200) {
      shipTonAnalysData.value = res.data;
      radio2Change();
    }
  });
};
const radio2Change = () => {
  let obj = {};
  if (radio2.value === "当日") {
    totalShip.value = shipTonAnalysData.value.today.totalShip;
    totalShipLoad.value = shipTonAnalysData.value.today.dw;
    obj = shipTonAnalysData.value.today;
  } else if (radio2.value === "当周") {
    totalShip.value = shipTonAnalysData.value.thisWeek.totalShip;
    totalShipLoad.value = shipTonAnalysData.value.thisWeek.dw;
    obj = shipTonAnalysData.value.thisWeek;
  } else if (radio2.value === "当月") {
    totalShip.value = shipTonAnalysData.value.thisMonth.totalShip;
    totalShipLoad.value = shipTonAnalysData.value.thisMonth.dw;
    obj = shipTonAnalysData.value.thisMonth;
  } else if (radio2.value === "当年") {
    totalShip.value = shipTonAnalysData.value.thisYear.totalShip;
    totalShipLoad.value = shipTonAnalysData.value.thisYear.dw;
    obj = shipTonAnalysData.value.thisYear;
  }
  initThirdChart(obj);
};
const radio3 = ref("周");
const count = ref("1");
const countOptions = [
  { name: "上下行船舶统计", value: "1" },
  { name: "空重载船舶统计", value: "2" },
];
const shipllAnalysFn = () => {
  if (radio3.value === "日") {
    shipllAnalys({
      bridge: bridge.value,
      type: count.value,
    }).then((res) => {
      if (res.code === 200 && res.data.length) {
        document.getElementById("no-data4").style.display = "none";
        initFourthChart(res.data);
      } else {
        document.getElementById("no-data4").style.display = "block";
      }
    });
  } else if (radio3.value === "周") {
    shipllAnalysWeek({
      bridge: bridge.value,
      type: count.value,
    }).then((res) => {
      if (res.code === 200 && res.data.length) {
        document.getElementById("no-data4").style.display = "none";
        initFourthChart(res.data);
      } else {
        document.getElementById("no-data4").style.display = "block";
      }
    });
  } else if (radio3.value === "月") {
    shipllAnalysMonth({
      bridge: bridge.value,
      type: count.value,
    }).then((res) => {
      if (res.code === 200 && res.data.length) {
        document.getElementById("no-data4").style.display = "none";
        initFourthChart(res.data);
      } else {
        document.getElementById("no-data4").style.display = "block";
      }
    });
  } else if (radio3.value === "年") {
    shipllAnalysYear({
      bridge: bridge.value,
      type: count.value,
    }).then((res) => {
      if (res.code === 200 && res.data.length) {
        document.getElementById("no-data4").style.display = "none";
        initFourthChart(res.data);
      } else {
        document.getElementById("no-data4").style.display = "block";
      }
    });
  }
};
const radio4 = ref("日");
const radio5 = ref("日");
const bmpName = ref("");
const getCenterByBgFn = () => {
  getCenterByBg({
    bridge: bridge.value,
  }).then((res) => {
    if (res.code === 200) {
      bmpName.value = res.data[0].bmPname;
      shipTrendFn("全部");
    }
  });
};
const shipTrendFn = (val) => {
  shipTrend({
    bridge: bridge.value,
    bmpName: bmpName.value,
  }).then((res) => {
    if (res.code === 200) {
      if (val == "流量") {
        initFifthChart(res.data.ship);
      } else if (val == "吨位") {
        initSixthChart(res.data.tonnage);
      } else {
        initFifthChart(res.data.ship);
        initSixthChart(res.data.tonnage);
      }
    }
  });
};

//筛选
const isShowFilter = ref(false);
const checkAll1 = ref(false);
const isIndeterminate1 = ref(false);
const checkedValues1 = ref([]);
const options1 = ["一级", "二级", "三级"];
const handleCheckAllChange1 = (val) => {
  hiddenTrouble.value = false;
  highTerminal.value = false;
  checkedValues1.value = val ? options1 : [];
  isIndeterminate1.value = false;
  handleSure();
};
const handleCheckedChange1 = (value) => {
  hiddenTrouble.value = false;
  highTerminal.value = false;
  const checkedCount = value.length;
  checkAll1.value = checkedCount === options1.length;
  isIndeterminate1.value = checkedCount > 0 && checkedCount < options1.length;
  handleSure();
};

const checkAll2 = ref(false);
const isIndeterminate2 = ref(false);
const checkedValues2 = ref([]);
const options2 = ["四级", "五级", "六级", "七级"];
const handleCheckAllChange2 = (val) => {
  hiddenTrouble.value = false;
  highTerminal.value = false;
  checkedValues2.value = val ? options2 : [];
  isIndeterminate2.value = false;
  handleSure();
};
const handleCheckedChange2 = (value) => {
  hiddenTrouble.value = false;
  highTerminal.value = false;
  const checkedCount = value.length;
  checkAll2.value = checkedCount === options2.length;
  isIndeterminate2.value = checkedCount > 0 && checkedCount < options2.length;
  handleSure();
};

const nhdwhd = ref(false);

const checkAll3 = ref(false);
const isIndeterminate3 = ref(false);
const checkedValues3 = ref([]);
const options3 = ["达标", "不达标"];
const handleCheckAllChange3 = (val) => {
  hiddenTrouble.value = false;
  highTerminal.value = false;
  checkedValues3.value = val ? options3 : [];
  isIndeterminate3.value = false;
  handleSure();
};
const handleCheckedChange3 = (value) => {
  hiddenTrouble.value = false;
  highTerminal.value = false;
  const checkedCount = value.length;
  checkAll3.value = checkedCount === options3.length;
  isIndeterminate3.value = checkedCount > 0 && checkedCount < options3.length;
  handleSure();
};

const checkAll4 = ref(false);
const isIndeterminate4 = ref(false);
const checkedValues4 = ref([]);
const options4 = ["近三年被撞桥梁", "近一年被撞桥梁"];
const handleCheckAllChange4 = (val) => {
  hiddenTrouble.value = false;
  highTerminal.value = false;
  checkedValues4.value = val ? options4 : [];
  isIndeterminate4.value = false;
  handleSure();
};
const handleCheckedChange4 = (value) => {
  hiddenTrouble.value = false;
  highTerminal.value = false;
  const checkedCount = value.length;
  checkAll4.value = checkedCount === options4.length;
  isIndeterminate4.value = checkedCount > 0 && checkedCount < options4.length;
  handleSure();
};

const hiddenTrouble = ref(false);
const highTerminal = ref(false);

const hiddenTroubleFn = () => {
  if (hiddenTrouble.value) {
    checkAll1.value = false;
    isIndeterminate1.value = false;
    checkedValues1.value = [];
    checkAll2.value = false;
    isIndeterminate2.value = false;
    checkedValues2.value = [];
    nhdwhd.value = false;
    checkAll3.value = false;
    isIndeterminate3.value = false;
    checkedValues3.value = [];
    checkAll4.value = false;
    isIndeterminate4.value = false;
    checkedValues4.value = [];
    highTerminal.value = false;
  }
  handleSure();
};
const highTerminalFn = () => {
  if (highTerminal.value) {
    checkAll1.value = false;
    isIndeterminate1.value = false;
    checkedValues1.value = [];
    checkAll2.value = false;
    isIndeterminate2.value = false;
    checkedValues2.value = [];
    nhdwhd.value = false;
    checkAll3.value = false;
    isIndeterminate3.value = false;
    checkedValues3.value = [];
    checkAll4.value = false;
    isIndeterminate4.value = false;
    checkedValues4.value = [];
    hiddenTrouble.value = false;
  }
  handleSure();
};

const handleSure = () => {
  let arr = checkedValues1.value.concat(checkedValues2.value);
  let isDabiao = [];
  let isAccident = [];
  if (nhdwhd.value === true) {
    hiddenTrouble.value = false;
    highTerminal.value = false;
    arr.push("八级");
  }
  checkedValues3.value.forEach((item) => {
    if (item == "达标") {
      isDabiao.push(0);
    } else if (item == "不达标") {
      isDabiao.push(1);
    }
  });
  checkedValues4.value.forEach((item) => {
    if (item == "近三年被撞桥梁") {
      isAccident.push(3);
    } else if (item == "近一年被撞桥梁") {
      isAccident.push(1);
    }
  });
  OlArcRef.value.getPosInfoFn(
    {
      level: arr.join(","),
      isDabiao: isDabiao.join(","),
      isAccident: isAccident.join(","),
    },
    hiddenTrouble.value,
    highTerminal.value
  );
};

//中山先行示范区
const bridge1 = ref("中山港大桥");
const bridgeOptions1 = ref([]);
const bgListFn = () => {
  bgList().then((res) => {
    if (res.code === 200) {
      bridgeOptions1.value = res.data;
      bridgeBaseInfoFn1();
      bridgePortraitZhongshanFn();
      getBgPicFn1();
      bridgeWaterwayRiskFn1();
      yawStatisticsFn1();
      bgWaterSitFn1();
      windSpeedFn();
      nengjianduFn();
      shipllAnalysFn1();
    }
  });
};
const bridgeChange1 = () => {
  bridgeBaseInfoFn1();
  bridgePortraitZhongshanFn();
  getBgPicFn1();
  bridgeWaterwayRiskFn1();
  yawStatisticsFn1();
  bgWaterSitFn1();
  windSpeedFn();
  nengjianduFn();
  shipllAnalysFn1();
};
const bridgeBaseInfoData1 = ref({});
const bridgeBaseInfoFn1 = () => {
  bridgeBaseInfo({
    bridge: bridge1.value,
  }).then((res) => {
    if (res.code === 200) {
      bridgeBaseInfoData1.value = res.data[0];
    }
  });
};
const high = ref("");
const shebiao = ref("");
const wide = ref("");
const bridgePortraitZhongshanFn = () => {
  bridgePortraitZhongshan({
    bridge: bridge1.value,
  }).then((res) => {
    if (res.code === 200) {
      high.value = res.data.high;
      shebiao.value = res.data.shebiao;
      wide.value = res.data.wide;
    }
  });
};
const picUrl1 = ref("");
const getBgPicFn1 = () => {
  getBgPic({
    bridge: bridge1.value,
  }).then((res) => {
    if (res.code === 200 && res.data.picUrl) {
      picUrl1.value =
        `${import.meta.env.VITE_APP_BASE_API}attach` + res.data.picUrl;
    }
    //else {
    //   picUrl1.value = "";
    // }
  });
};
// const imgError1 = () => {
//   picUrl1.value = "";
// };
const bridgeHoleData1 = ref({});
const tonghangkong1 = ref([]);
const bridgeWaterwayRiskFn1 = () => {
  bridgeWaterwayRisk({
    bridge: bridge1.value,
  }).then((res) => {
    if (res.code === 200) {
      bridgeHoleData1.value = res.data;
      tonghangkong1.value = res.data.tonghangkong;
    }
  });
};
const yawStatisticsData1 = ref({});
const yawStatisticsFn1 = () => {
  yawStatistics({
    bridge: bridge1.value,
  }).then((res) => {
    if (res.code === 200) {
      yawStatisticsData1.value = res.data.total_num[0];
    }
  });
};
const bgWaterSitData1 = ref({});
const bgWaterSitFn1 = () => {
  bgWaterSit({
    bridge: bridge1.value,
  }).then((res) => {
    if (res.code === 200) {
      bgWaterSitData1.value = res.data[0] || {};
    }
  });
};
const radio6 = ref("通航孔");
const count1 = ref("1");
const radio7 = ref("周");
const shipllAnalysFn1 = () => {
  if (radio7.value === "日") {
    shipllAnalys({
      bridge: bridge1.value,
      type: count1.value,
    }).then((res) => {
      if (res.code === 200 && res.data.length) {
        document.getElementById("no-data").style.display = "none";
        initSeventhChart(res.data);
      } else {
        document.getElementById("no-data").style.display = "block";
      }
    });
  } else if (radio7.value === "周") {
    shipllAnalysWeek({
      bridge: bridge1.value,
      type: count1.value,
    }).then((res) => {
      if (res.code === 200 && res.data.length) {
        document.getElementById("no-data").style.display = "none";
        initSeventhChart(res.data);
      } else {
        document.getElementById("no-data").style.display = "block";
      }
    });
  } else if (radio7.value === "月") {
    shipllAnalysMonth({
      bridge: bridge1.value,
      type: count1.value,
    }).then((res) => {
      if (res.code === 200 && res.data.length) {
        document.getElementById("no-data").style.display = "none";
        initSeventhChart(res.data);
      } else {
        document.getElementById("no-data").style.display = "block";
      }
    });
  } else if (radio7.value === "年") {
    shipllAnalysYear({
      bridge: bridge1.value,
      type: count1.value,
    }).then((res) => {
      if (res.code === 200 && res.data.length) {
        document.getElementById("no-data").style.display = "none";
        initSeventhChart(res.data);
      } else {
        document.getElementById("no-data").style.display = "block";
      }
    });
  }
};
//风速情况
const windSpeedFn = () => {
  windSpeed({
    bridge: bridge1.value,
  }).then((res) => {
    if (res.code === 200) {
      let xAxisData = [];
      let seriesData = [];
      res.data.forEach((item) => {
        xAxisData.push(item.sj);
        seriesData.push(item.avgWindSpeed);
      });
      initLineChart1(xAxisData, seriesData);
    }
  });
};
const initLineChart1 = (xAxisData, seriesData) => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart1")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart1"));

  let option;
  option = {
    tooltip: {
      trigger: "axis",
      confine: true, //限制在图表区域内
    },
    grid: {
      top: "40px",
      left: "50px",
      right: "30px",
      bottom: "45px",
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLabel: {
        color: "#FFFFFF",
        fontSize: "16px",
      },
    },
    yAxis: {
      name: "风速（m/s）",
      type: "value",
      nameTextStyle: {
        fontWeight: "500",
        fontSize: "16px",
        color: "rgba(255,255,255,0.65)",
      },
      axisLabel: {
        color: "rgba(255,255,255,0.65)",
        fontSize: "16px",
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
        },
      },
    },
    series: [
      {
        name: "风速(m/s)",
        data: seriesData,
        type: "line",
        color: "#78DFFF",
      },
    ],
  };
  option && lineChart.setOption(option);
};
//能见度情况
const nengjianduFn = () => {
  nengjiandu({
    bridge: bridge1.value,
  }).then((res) => {
    if (res.code === 200) {
      let xAxisData = [];
      let seriesData = [];
      res.data.forEach((item) => {
        xAxisData.push(item.sj);
        seriesData.push(item.njdValue);
      });
      initLineChart2(xAxisData, seriesData);
    }
  });
};
const initLineChart2 = (xAxisData, seriesData) => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart2")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart2"));

  let option;
  option = {
    tooltip: {
      trigger: "axis",
      confine: true, //限制在图表区域内
    },
    grid: {
      top: "40px",
      left: "50px",
      right: "30px",
      bottom: "45px",
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLabel: {
        color: "#FFFFFF",
        fontSize: "16px",
      },
    },
    yAxis: {
      name: "能见度（m）",
      type: "value",
      nameTextStyle: {
        fontWeight: "500",
        fontSize: "16px",
        color: "rgba(255,255,255,0.65)",
      },
      axisLabel: {
        color: "rgba(255,255,255,0.65)",
        fontSize: "16px",
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
        },
      },
    },
    series: [
      {
        name: "能见度(m)",
        data: seriesData,
        type: "line",
        color: "#78DFFF",
      },
    ],
  };
  option && lineChart.setOption(option);
};

//事故案例情况
const year = ref("全部");
const yearOptions = ref([]);
const tableData = ref([]);
const recentTime = ref("");
const getYearListFn = () => {
  getYearList().then((res) => {
    if (res.code === 200) {
      // year.value = res.data[0].year;
      res.data.unshift({ year: "全部" });
      yearOptions.value = res.data;
      acciSitFn();
    }
  });
};
const acciSitFn = () => {
  acciSit({
    year: year.value === "全部" ? "" : year.value,
  }).then((res) => {
    if (res.code === 200) {
      tableData.value = res.data.accidentList;
      recentTime.value = res.data.recentTime;

      let accidentData = [];
      let colorData = [
        "#78DFFF",
        "#9AD4EF",
        "#309CFF",
        "#2B679D",
        "#5057FD",
        "#8083D8",
        "#5AF5D5",
        "#A6E7D9",
        "#55FE5C",
        "#9CDB9F",
        "#FFC733",
        "#FFE6A5",
        "#FE762A",
        "#F9B793",
        "#E33F3F",
        "#F48787",
        "#ED44F0",
        "#F5ABF6",
        "#41616A",
        "#ADCDD6",
      ];
      res.data.group.forEach((item, index) => {
        let obj = {
          name: item.accidentLevel,
          value: item.count,
          itemStyle: {
            color: colorData[index],
          },
        };
        accidentData.push(obj);
      });
      initEighthChart(accidentData);
    }
  });
};
const yearChange = () => {
  acciSitFn();
};
const showAccidentList = ref(false);

const initFirstChart = (data) => {
  let xAxisData = [];
  let seriesData = [];
  data.forEach((item) => {
    xAxisData.push(item.time);
    seriesData.push(item.cbll);
  });
  nextTick(() => {
    let lineChart = echarts.getInstanceByDom(
      document.getElementById("first-chart")
    );
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("first-chart"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      grid: {
        top: "40px",
        left: "70px",
        right: "15px",
        bottom: "40px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          color: "rgba(255,255,255,0.85)",
          fontSize: "16px",
        },
        data: xAxisData,
      },
      yAxis: {
        type: "value",
        name: "单位（艘）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
      series: [
        {
          data: seriesData,
          type: "line",
          itemStyle: {
            color: "#78DFFF",
          },
        },
      ],
    };
    option && lineChart.setOption(option);
  });
};
const initSecondChart1 = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    data.forEach((item) => {
      xAxisData.push(item.month);
      seriesData.push(item.times);
    });
    let lineChart = echarts.getInstanceByDom(
      document.getElementById("second-chart1")
    );
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("second-chart1"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      grid: {
        top: "40px",
        left: "60px",
        right: "15px",
        bottom: "40px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },
        data: xAxisData,
      },
      yAxis: {
        type: "value",
        name: "船舶数量（艘）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: rgba(255, 255, 255, 0.65),
        },
        axisLabel: {
          color: rgba(255, 255, 255, 0.65),
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
      series: [
        {
          data: seriesData,
          type: "line",
          itemStyle: {
            color: "#78DFFF",
          },
        },
      ],
    };
    option && lineChart.setOption(option);
  });
};
const initSecondChart2 = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    data.forEach((item) => {
      xAxisData.push(item.month);
      seriesData.push(item.times);
    });
    let lineChart = echarts.getInstanceByDom(
      document.getElementById("second-chart2")
    );
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("second-chart2"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      grid: {
        top: "40px",
        left: "60px",
        right: "15px",
        bottom: "40px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },
        data: xAxisData,
      },
      yAxis: {
        type: "value",
        name: "船舶数量（艘）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "#FFFFFF",
          opacity: 0.65,
        },
        axisLabel: {
          color: "#FFFFFF",
          opacity: 0.65,
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
      series: [
        {
          data: seriesData,
          type: "line",
          itemStyle: {
            color: "#78DFFF",
          },
        },
      ],
    };
    option && lineChart.setOption(option);
  });
};
const initSecondChart3 = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    data.forEach((item) => {
      xAxisData.push(item.month);
      seriesData.push(item.times);
    });
    let lineChart = echarts.getInstanceByDom(
      document.getElementById("second-chart3")
    );
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("second-chart3"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      grid: {
        top: "40px",
        left: "60px",
        right: "15px",
        bottom: "40px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          color: "#FFFFFF",
          opacity: 0.85,
          fontSize: "16px",
        },
        data: xAxisData,
      },
      yAxis: {
        type: "value",
        name: "船舶数量（艘）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "#FFFFFF",
          opacity: 0.65,
        },
        axisLabel: {
          color: "#FFFFFF",
          opacity: 0.65,
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
      series: [
        {
          data: seriesData,
          type: "line",
          itemStyle: {
            color: "#78DFFF",
          },
        },
      ],
    };
    option && lineChart.setOption(option);
  });
};
const initThirdChart = (obj) => {
  nextTick(() => {
    let data = [
      { name: "VI级", value: obj.ton1, itemStyle: { color: "#309CFF" } },
      { name: "V级", value: obj.ton2, itemStyle: { color: "#5057FD" } },
      {
        name: "IV级 ",
        value: obj.ton3,
        itemStyle: { color: "#5AF5D5" },
      },
      { name: "III级", value: obj.ton4, itemStyle: { color: "#FFC733" } },
      { name: "II级", value: obj.ton5, itemStyle: { color: "#FE772A" } },
      { name: "I级", value: obj.ton6, itemStyle: { color: "#E33F3F" } },
    ];

    let pieChart = echarts.getInstanceByDom(
      document.getElementById("third-chart")
    );
    if (pieChart != null && pieChart != "" && pieChart != undefined) {
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById("third-chart"));
    let option = {
      graphic: {
        type: "image",
        id: "background",
        left: 45,
        top: 16,
        z: -10, // 确保背景图在底层
        bounding: "raw",
        origin: [200, 200], // 图片的中心位置
        style: {
          image: chartBg, // 背景图片的URL
          width: 160, // 背景图片的宽度
          height: 160, // 背景图片的高度
        },
      },
      legend: {
        type: "scroll",
        orient: "vertical", // 设置为垂直分布
        itemWidth: 8,
        itemHeight: 8,
        right: '15%',
        top: 20,
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },
        pageIconColor: "#FFFFFF", // 翻页按钮的颜色
        pageIconInactiveColor: "#2f4554", // 翻页按钮不激活时的颜色
        pageTextStyle: {
          color: "#FFFFFF", // 图例页信息的文字样式
        },
      },
      tooltip: {
        trigger: "item",
        confine: true, //限制在图表区域内
      },
      series: [
        {
          type: "pie",
          radius: ["47%", "57%"],
          center: ["32%", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          labelLine: {
            show: true, //标签连接线
          },
          data: data,
        },
      ],
    };
    option && pieChart.setOption(option);
  });
};
const initFourthChart = (data) => {
  let xAxisData = [];
  let seriesData1 = [];
  let seriesData2 = [];

  data.forEach((item) => {
    xAxisData.push(item.tgsj);
    if (count.value == 1) {
      seriesData1.push(item.up);
      seriesData2.push(item.down);
    } else {
      seriesData1.push(item.zhongdai);
      seriesData2.push(item.kongzai);
    }
  });

  let chart = echarts.getInstanceByDom(document.getElementById("fourth-chart"));
  if (chart != null && chart != "" && chart != undefined) {
    chart.dispose();
  }
  chart = echarts.init(document.getElementById("fourth-chart"));
  let option;
  option = {
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        fontSize: "16px",
        color: "#FFFFFF",
      },
      itemGap: 6,
    },
    grid: {
      top: "20%",
      left: "8%",
      right: "15%",
      bottom: "5%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        startValue: 0,
        endValue: 6,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        name: "",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        data: xAxisData,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        axisLabel: {
          interval: 0,
          color: "#FFFFFF",
          fontSize: "16px",
        },
        axisPointer: {
          show: true,
          type: "none",
          label: {
            show: false,
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "船舶流量（艘）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        nameGap: 15,
        axisLabel: {
          interval: 0,
          color: "rgba(255,255,255,0.65)",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
    ],
    series: [
      {
        name: count.value == 1 ? "上行" : "重载",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#78DFFF" }, // 顶部
          { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
        ]),
        data: seriesData1,
      },
      {
        name: count.value == 1 ? "下行" : "空载",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: "15%",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#FFC733 " }, // 顶部
          { offset: 1, color: "rgba(255, 199, 51, 0.20)" }, // 底部
        ]),
        data: seriesData2,
      },
    ],
  };

  option && chart.setOption(option);
};
const initFifthChart = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    if (radio4.value == "日") {
      xAxisData = data.day1;
      seriesData = [
        {
          name: "实际",
          data: data.num,
          type: "line",
          itemStyle: {
            color: "#78DFFF",
          },
        },
      ];
    } else if (radio4.value == "月") {
      xAxisData = data.month1.actualMonth;
      seriesData = [
        {
          name: "实际",
          data: data.month1.actual,
          type: "line",
          itemStyle: {
            color: "#78DFFF",
          },
        },
        {
          name: "预测值",
          data: data.month1.forcast,
          type: "line",
          itemStyle: {
            color: "#FFC733",
          },
        },
      ];
    }
    let lineChart = echarts.getInstanceByDom(
      document.getElementById("fifth-chart")
    );
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("fifth-chart"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      legend: {
        itemWidth: 8,
        itemHeight: 8,
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },
        icon: 'rect',
        // itemGap: 6,
      },
      grid: {
        top: "40px",
        left: "50px",
        right: "15px",
        bottom: "40px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },
        data: xAxisData,
      },
      yAxis: {
        type: "value",
        name: "单位（万艘）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255, 255, 255, 0.65)",
        },
        axisLabel: {
          color: "rgba(255, 255, 255, 0.65)",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
      series: seriesData,
    };
    option && lineChart.setOption(option);
  });
};
const initSixthChart = (data) => {
  nextTick(() => {
    let xAxisData = [];
    let seriesData = [];
    if (radio5.value == "日") {
      xAxisData = data.day1;
      seriesData = [
        {
          name: "实际",
          data: data.num,
          type: "line",
          itemStyle: {
            color: "#78DFFF",
          },
        },
      ];
    } else if (radio5.value == "月") {
      xAxisData = data.month1.actualMonth;
      seriesData = [
        {
          name: "实际",
          data: data.month1.actual,
          type: "line",
          itemStyle: {
            color: "#78DFFF",
          },
        },
        {
          name: "预测值",
          data: data.month1.forcast,
          type: "line",
          itemStyle: {
            color: "#FFC733",
          },
        },
      ];
    }
    let lineChart = echarts.getInstanceByDom(
      document.getElementById("sixth-chart")
    );
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("sixth-chart"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      legend: {
        itemWidth: 8,
        itemHeight: 8,
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },
        icon: 'rect',
        itemGap: 6,
      },
      grid: {
        top: "40px",
        left: "50px",
        right: "15px",
        bottom: "40px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },
        data: xAxisData,
      },
      yAxis: {
        type: "value",
        name: "单位（万吨）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255, 255, 255, 0.65)",
        },
        axisLabel: {
          color: "rgba(255, 255, 255, 0.65)",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
      series: seriesData,
    };
    option && lineChart.setOption(option);
  });
};
const initSeventhChart = (data) => {
  let xAxisData = [];
  let seriesData1 = [];
  let seriesData2 = [];

  data.forEach((item) => {
    xAxisData.push(item.tgsj);
    if (count1.value == 1) {
      seriesData1.push(item.up);
      seriesData2.push(item.down);
    } else {
      seriesData1.push(item.zhongdai);
      seriesData2.push(item.kongzai);
    }
  });
  let chart = echarts.getInstanceByDom(
    document.getElementById("seventh-chart")
  );
  if (chart != null && chart != "" && chart != undefined) {
    chart.dispose();
  }
  chart = echarts.init(document.getElementById("seventh-chart"));
  let option;
  option = {
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        fontSize: "16px",
        color: "#FFFFFF",
      },
      itemGap: 6,
    },
    grid: {
      top: "20%",
      left: "12%",
      right: "15%",
      bottom: "5%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        startValue: 0,
        endValue: 9,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        name: "",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        data: xAxisData,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        axisLabel: {
          interval: 0,
          color: "#FFFFFF",
          fontSize: "16px",
        },
        axisPointer: {
          show: true,
          type: "none",
          label: {
            show: false,
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "船舶流量（艘）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        nameGap: 15,
        axisLabel: {
          interval: 0,
          color: "rgba(255,255,255,0.65)",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
    ],
    series: [
      {
        name: count1.value == 1 ? "上行" : "重载",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#78DFFF" }, // 顶部
          { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
        ]),
        data: seriesData1,
      },
      {
        name: count1.value == 1 ? "下行" : "空载",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: "15%",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#FFC733 " }, // 顶部
          { offset: 1, color: "rgba(255, 199, 51, 0.20)" }, // 底部
        ]),
        data: seriesData2,
      },
    ],
  };

  option && chart.setOption(option);
};
const initEighthChart = (accidentData) => {
  nextTick(() => {
    let pieChart = echarts.getInstanceByDom(
      document.getElementById("eighth-chart")
    );
    if (pieChart != null && pieChart != "" && pieChart != undefined) {
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById("eighth-chart"));

    // 清除之前的定时器（如果存在）
    if (window.scrollTimer8) {
      clearInterval(window.scrollTimer8);
    }

    let option = {
      graphic: {
        type: "image",
        id: "background",
        left: 241,
        top: 20,
        z: -10, // 确保背景图在底层
        bounding: "raw",
        origin: [200, 200], // 图片的中心位置
        style: {
          image: chartBg, // 背景图片的URL
          width: 260, // 背景图片的宽度
          height: 260, // 背景图片的高度
        },
      },
      legend: {
        type: "scroll",
        bottom: 10,
        itemWidth: 8,
        itemHeight: 8,
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },
        pageIconColor: "#FFFFFF", // 翻页按钮的颜色
        pageIconInactiveColor: "#2f4554", // 翻页按钮不激活时（即翻页到头时）的颜色
        pageTextStyle: {
          // 图例页信息的文字样式
          color: "#FFFFFF",
        },
        pageMode: true,
        pageButtonPosition: 'end',
        selector: false,
        itemCount: 5,
      },
      tooltip: {
        trigger: "item",
        confine: true, //限制在图表区域内
      },
      series: [
        {
          type: "pie",
          radius: ["51%", "60%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          labelLine: {
            show: true, //标签连接线
          },
          data: accidentData,
        },
      ],
    };
    option && pieChart.setOption(option);

    // 设置自动滚动
    if (accidentData && accidentData.length > 5) {
      let currentIndex = 0;
      let isForward = true;
      let maxIndex = accidentData.length - 5;

      window.scrollTimer8 = setInterval(() => {
        if (pieChart && !pieChart.isDisposed()) {
          pieChart.dispatchAction({
            type: 'legendScroll',
            scrollDataIndex: currentIndex
          });

          if (isForward) {
            currentIndex++;
            if (currentIndex >= maxIndex) {
              isForward = false;
            }
          } else {
            currentIndex--;
            if (currentIndex <= 0) {
              isForward = true;
              currentIndex = 0;
            }
          }
        }
      }, 2000); // 每2秒滚动一次
    }
  });
};
const initNinthChart = (regionDivisionData) => {
  nextTick(() => {
    let pieChart = echarts.getInstanceByDom(
      document.getElementById("ninth-chart")
    );
    if (pieChart != null && pieChart != "" && pieChart != undefined) {
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById("ninth-chart"));

    // 清除之前的定时器（如果存在）
    if (window.scrollTimer9) {
      clearInterval(window.scrollTimer9);
    }

    let option = {
      graphic: {
        type: "image",
        id: "background",
        left: 43,
        top: 10,
        z: -10, // 确保背景图在底层
        bounding: "raw",
        origin: [200, 200], // 图片的中心位置
        style: {
          image: chartBg, // 背景图片的URL
          width: 210, // 背景图片的宽度
          height: 210, // 背景图片的高度
        },
      },
      legend: {
        type: "scroll",
        itemWidth: 8,
        itemHeight: 8,
        bottom: -1,
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },
        pageIconColor: "#FFFFFF", // 翻页按钮的颜色
        pageIconInactiveColor: "#2f4554", // 翻页按钮不激活时（即翻页到头时）的颜色
        pageTextStyle: {
          // 图例页信息的文字样式
          color: "#FFFFFF",
        },
        pageMode: true,
        pageButtonPosition: 'end',
        selector: false,
        itemCount: 5,
      },
      tooltip: {
        trigger: "item",
        confine: true, //限制在图表区域内
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "60%"],
          center: ["50%", "48%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          labelLine: {
            show: true, //标签连接线
          },
          data: regionDivisionData,
        },
      ],
    };
    option && pieChart.setOption(option);

    // 设置自动滚动
    if (regionDivisionData && regionDivisionData.length > 5) {
      let currentIndex = 0;
      let isForward = true;
      let maxIndex = regionDivisionData.length - 5;

      window.scrollTimer9 = setInterval(() => {
        if (pieChart && !pieChart.isDisposed()) {
          pieChart.dispatchAction({
            type: 'legendScroll',
            scrollDataIndex: currentIndex
          });

          if (isForward) {
            currentIndex++;
            if (currentIndex >= maxIndex) {
              isForward = false;
            }
          } else {
            currentIndex--;
            if (currentIndex <= 0) {
              isForward = true;
              currentIndex = 0;
            }
          }
        }
      }, 2000); // 每2秒滚动一次
    }
  });
};
//是否显示iframe
const isShow = ref(false);
//缺省图
const noEcharts = (id) => {
  const noDataImg = errorImg;
  const averageChart = document.getElementById(id);
  averageChart.style.display = "flex";
  averageChart.style.flexDirection = "column";
  averageChart.style.justifyContent = "center";
  averageChart.style.alignItems = "center";
  averageChart.removeChild(averageChart.firstChild);
  const mainImg = document.createElement("img");
  averageChart.appendChild(mainImg);
  mainImg.style.width = "auto";
  mainImg.style.height = "auto";
  mainImg.src = noDataImg;
  const pBlock = document.createElement("p");
  averageChart.appendChild(pBlock);
  pBlock.innerHTML = "暂无数据";
  pBlock.style.color = "#FFFFFF";
  pBlock.style.fontSize = "14px";
};

onMounted(() => {

  document.title = "水上桥区管控";
  getBgAndWyFn();
  rammedBridgeFn();
  cityDivisionFn();
  regionDivisionFn();
  getBridgeListFn();
  bgListFn();
  getYearListFn();
});

onUnmounted(() => {
  // Clean up all timers to prevent memory leaks
  if (window.scrollTimer8) {
    clearInterval(window.scrollTimer8);
    window.scrollTimer8 = null;
  }
  if (window.scrollTimer9) {
    clearInterval(window.scrollTimer9);
    window.scrollTimer9 = null;
  }
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: Din;
  src: url("../assets/fonts/din.ttf");
}

@font-face {
  font-family: Tx;
  src: url("../assets/fonts/tx.ttf");
}

.container {
  width: 5760px;
  height: 1200px;
  transform-origin: 0 0;
  position: relative;
  background: #012138; /* 确保bigSizeScreen页面中的魔法边框内容正确显示 */
  .bigsize-magic-border > * {
    position: relative;
    z-index: 2;
  } /* 调整三个组件的样式 */
  .legend.bigsize-magic-border,
  .count.bigsize-magic-border,
  .filter.bigsize-magic-border {
    background: rgba(5, 48, 68, 0.8);
    border-radius: 4px;
    overflow: hidden;
  }

  .main {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: content-box;

    .left-content {
      width: 1648px;

      .item-content {
        box-sizing: content-box;
        background-color: #06324f;

        .item-title {
          background-image: url("../assets/images/big-screen/one-title-bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          color: #fff;
          font-size: 26px;
          font-weight: 400;
          height: 40px;
          line-height: 40px;
          padding: 8px 0px 8px 28px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            font-family: "Tx";
          }
        }

        .flex {
          display: flex;
          flex-wrap: wrap;
          box-sizing: content-box;
          margin: 8px 28px;

          .item {
            width: 32%;
            height: 246px;
            box-sizing: content-box;

            .top {
              background-image: url("../assets/images/big-screen/two-title-bg.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 5px 0px;
              margin-bottom: 8px;

              .title {
                font-family: "Tx";
                font-size: 24px;
                color: #fff;
                padding-left: 32px;
              }
            }

            .top1 {
              background-image: url("../assets/images/big-screen/three-title-bg.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 5px 0px;
              margin-bottom: 8px;

              .title {
                font-family: "Tx";
                font-size: 24px;
                color: #fff;
                padding-left: 32px;
              }

              .tips {
                color: rgba(255, 255, 255, 0.85);
                font-size: 18px;
                font-weight: 400;
              }
            }

            .part {
              display: flex;

              .left-part {
                width: 35%;
                margin: 10px 20px;

                .left-part-item {
                  display: flex;

                  .img-icon {
                    width: 74px;
                    height: 74px;

                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }

                  .count {
                    margin-left: 16px;

                    .name {
                      font-weight: 500;
                      font-size: 20px;
                      color: rgba(255, 255, 255, 0.85);
                    }

                    .value {
                      font-family: "Din";
                      font-weight: bold;
                      font-size: 40px;
                      color: #ffffff;
                    }
                  }
                }
              }

              .right-part {
                width: 65%;

                .part-item {
                  display: flex;
                  justify-content: space-around;
                  color: #ffffff;
                  background: linear-gradient(
                    90deg,
                    rgba(120, 223, 255, 0.02) 1%,
                    rgba(41, 191, 238, 0.31) 59%,
                    rgba(120, 223, 255, 0) 100%
                  );
                  border: 1px solid;
                  border-image: linear-gradient(
                      360deg,
                      rgba(120, 223, 255, 0),
                      rgba(63, 207, 252, 0.81),
                      rgba(120, 223, 255, 0)
                    )
                    1 1;
                  margin-bottom: 9px;
                  padding: 8px 0;

                  .name {
                    font-weight: 500;
                    font-size: 18px;
                    color: rgba(255, 255, 255, 0.85);
                  }

                  .value {
                    font-family: "Din";
                    font-weight: bold;
                    font-size: 32px;
                  }
                }
                .part-item1 {
                  display: flex;
                  justify-content: space-around;
                  color: #ffffff;
                  background: linear-gradient(
                    90deg,
                    rgba(120, 223, 255, 0.02) 1%,
                    rgba(41, 191, 238, 0.31) 59%,
                    rgba(120, 223, 255, 0) 100%
                  );
                  border: 1px solid;
                  border-image: linear-gradient(
                      360deg,
                      rgba(120, 223, 255, 0),
                      rgba(63, 207, 252, 0.81),
                      rgba(120, 223, 255, 0)
                    )
                    1 1;
                  margin-bottom: 9px;
                  padding: 8px 0;
                  margin-left: 0px;
                  position: absolute;
                  width: 455px;
                  height: 63px;

                  .name {
                    font-weight: 500;
                    font-size: 18px;
                    margin-left: 53px;
                    color: rgba(255, 255, 255, 0.85);
                    position: absolute;
                  }

                  .value {
                    font-family: "Din";
                    font-weight: bold;
                    margin-top: 24px;
                    margin-left: 50px;
                    position: relative;
                    font-size: 32px;
                  }
                }
              }
            }

            .bridge-accident {
              height: 285px;
              overflow: auto;
              .scroll-container {
                height: 4050px; /* 填充父容器 */
                overflow-y: auto; /* 允许垂直滚动 */
                animation: scroll 300s linear infinite; /* 添加自动滚动动画 */
              }
              @keyframes scroll {
                0% {
                  transform: translateY(0);
                }
                100% {
                  transform: translateY(-100%); /* 向上滚动100% */
                }
              }
              .custom-progress {
                width: 100%;
              }
              .bridge-accident-item {
                margin: 10px 0;
                height: 35px;
                color: #fff;

                .top-part {
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 8px;

                  .name {
                    font-weight: 400;
                    font-size: 14px;
                    color: #ffffff;
                  }

                  .value {
                    font-family: "Din";
                    font-weight: bold;
                    font-size: 18px;
                    color: #78dfff;
                  }
                }
              }

              .no-data {
                display: flex;
                justify-content: center;
                line-height: 268px;
                color: #ffffff;
                font-size: 28px;
                font-weight: bold;
              }
            }

            .bridge-img {
              width: 100%;
              height: 129px;

              img {
                width: 100%;
                height: 100%;
              }

              .no-img {
                text-align: center;
                color: #ffffff;
                font-size: 14px;

                img {
                  width: 180px;
                  height: 100px;
                }
              }
            }

            .base-info {
              height: 65px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              // margin: 8px 0px;
              padding: 0px 16px;
              background: rgba(120, 223, 255, 0.05);
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;

              .left-info {
                .name {
                  font-weight: 600;
                  font-size: 18px;
                  color: #78dfff;
                }

                .address {
                  font-weight: 500;
                  font-size: 16px;
                  color: rgba(255, 255, 255, 0.85);
                }
              }

              .right-info {
                display: flex;

                .name {
                  font-weight: 400;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.85);
                }

                .value {
                  font-weight: 500;
                  font-size: 18px;
                  color: #28ce8e;
                }
              }
            }

            .hole-count {
              height: 194px;
              background: rgba(120, 223, 255, 0.05);
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;

              .hole-item {
                display: flex;
                justify-content: space-between;
                padding: 8px 0;
                margin: 0 16px;
                border-bottom: 1px solid #204a64;

                .name {
                  font-weight: 500;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.85);
                }

                .value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 21px;
                  color: #ffffff;
                }
              }

              .tips {
                color: #ffffff;
                font-size: 16px;
                text-align: right;
                margin-top: 10px;
              }
            }

            .water-details {
              height: 195px;
              background: rgba(120, 223, 255, 0.05);
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;

              .top-details {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 16px;

                .update-time {
                  font-weight: 400;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.85);
                }
              }

              .bottom-details {
                .water-value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 32px;
                  color: #ffffff;
                  text-align: center;
                  margin: 10px 0;
                }

                .count {
                  height: 81px;
                  background: rgba(120, 223, 255, 0.05);
                  border: 1px solid;
                  border-image: linear-gradient(
                      360deg,
                      rgba(120, 223, 255, 0),
                      rgba(63, 207, 252, 0.81),
                      rgba(120, 223, 255, 0)
                    )
                    1 1;
                  margin: 0 16px;
                  display: flex;
                  justify-content: space-between;

                  .count-item {
                    margin: 8px 16px 0px 16px;

                    .name {
                      font-weight: 500;
                      font-size: 16px;
                      color: rgba(255, 255, 255, 0.85);
                    }

                    .value {
                      font-family: "Din";
                      font-weight: bold;
                      font-size: 28px;
                      display: flex;
                      align-items: center;

                      img {
                        width: 18px;
                        height: 18px;
                        margin-left: 6px;
                      }
                    }
                  }
                }
              }
            }

            .blueprint {
              position: relative;

              .blueprint-part {
                width: 100%;
                height: 195px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .num {
                position: absolute;
                top: 16px;
                left: 16px;

                .num-item {
                  .name {
                    font-weight: 500;
                    font-size: 18px;
                    color: #ffffff;
                  }

                  .value {
                    font-family: "Din";
                    font-weight: bold;
                    font-size: 32px;
                    color: #ffffff;
                  }

                  .more {
                    font-size: 18px;
                    font-weight: bold;
                    color: #ffffff;
                    text-decoration: underline;
                  }

                  .no {
                    font-size: 18px;
                    color: #ffffff;
                  }
                }
              }
            }

            .maintenance {
              height: 194px;
              display: flex;
              flex-wrap: wrap;
              background: rgba(120, 223, 255, 0.05);
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;

              .maintenance-item {
                width: 50%;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;

                .name {
                  font-weight: 500;
                  font-size: 18px;
                  color: #ffffff;
                  opacity: 0.85;
                }

                .value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 32px;
                  color: #ffffff;
                }
              }
            }

            .inspect {
              height: 194px;
              background: rgba(120, 223, 255, 0.05);
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;
              display: flex;
              justify-content: center;
              align-items: center;

              .img {
                margin-right: 12px;
              }

              .name {
                font-weight: 500;
                font-size: 20px;
                color: rgba(255, 255, 255, 0.85);
              }

              .value {
                font-family: "Din";
                font-weight: bold;
                font-size: 40px;
                color: #ffffff;
              }
            }

            .flowed {
              height: 194px;
              background: rgba(120, 223, 255, 0.05);
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;

              .top-part {
                display: flex;
                justify-content: space-around;
                align-items: center;

                .count-item {
                  margin-top: 27px;

                  .name {
                    font-weight: 500;
                    font-size: 20px;
                    color: rgba(255, 255, 255, 0.85);
                  }

                  .value {
                    font-family: "Din";
                    font-weight: bold;
                    font-size: 40px;
                    color: #ffffff;
                  }
                }
              }

              .bottom-part {
                text-align: center;
                font-weight: 600;
                font-size: 32px;
                color: #78dfff;
                margin: 16px 16px 0px 16px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .correlation {
              height: 194px;
              background: rgba(120, 223, 255, 0.05);
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;

              .value {
                font-family: "Din";
                font-weight: bold;
                font-size: 46px;
                color: #78dfff;
                text-align: center;
                margin-top: 67px;
              }
            }

            .ship-count {
              width: 50%;
              display: flex;
              justify-content: center;

              .ship-count-item {
                margin-right: 20px;

                .name {
                  font-weight: 500;
                  font-size: 20px;
                  color: rgba(255, 255, 255, 0.85);
                }

                .value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 40px;
                  color: #ffffff;
                }
              }
            }

            .no-data {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              display: none;

              .text {
                text-align: center;
                color: #ffffff;
                font-size: 14px;
              }
            }

            .watershed {
              .watershed-title {
                padding-bottom: 2px;
                margin-bottom: 8px;
                font-weight: 500;
                font-size: 22px;
                color: #ffffff;
                border-bottom: 1px solid rgba(120, 223, 255, 0.5);
              }
            }
          }
        }
      }
    }

    .middle-content {
      width: 2464px;
      height: 1080px;
      margin: 40px 0px;
      position: relative;

      .special-topic {
        position: absolute;
        top: 42px;
        left: 10px;
        font-family: "Tx";
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;

        .topic {
          width: 286px;
          height: 40px;
          background-image: url("../assets/images/big-screen/topic-bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 24px;
          color: rgba(255, 255, 255, 0.65);
        }

        .topic:hover {
          width: 286px;
          height: 40px;
          background-image: url("../assets/images/big-screen/topic-active-bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 24px;
        }

        .topic-active {
          width: 286px;
          height: 40px;
          background-image: url("../assets/images/big-screen/topic-active-bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 24px;
        }
      }

      .legend {
        width: 288px;
        height: 182px;
        background: rgba(5, 48, 68, 0.8);
        border: 1px solid rgba(120, 223, 255, 0.4);
        position: absolute;
        top: 42px;
        right: 10px;

        .legend-item {
          display: flex;
          font-size: 18px;
          font-weight: 400;
          color: #fff;
          margin: 16px 0px 16px 24px;

          img {
            width: 26px;
            height: 26px;
            padding-right: 8px;
          }
        }
      }

      .count {
        width: 288px;
        height: 122px;
        background: rgba(5, 48, 68, 0.8);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid rgba(120, 223, 255, 0.4);
        position: absolute;
        top: 240px;
        right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        .count-item {
          .name {
            font-weight: 500;
            font-size: 16px;
            color: #ffffff;
          }

          .value {
            font-family: "Din";
            font-weight: bold;
            font-size: 28px;
            color: #ffffff;
          }
        }
      }

      .filter {
        width: 288px;
        background: rgba(5, 48, 68, 0.8);
        border: 1px solid rgba(120, 223, 255, 0.4);
        position: absolute;
        top: 380px;
        right: 10px;

        .filter-title {
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          background: rgba(4, 35, 54, 0.8);
          border-bottom: 1px solid rgba(120, 223, 255, 0.4);
          padding: 8px 0px 8px 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            padding-right: 24px;
          }
        }

        .filter-item {
          margin: 8px 24px;

          .name {
            color: #78dfff;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }

    .right-content {
      width: 1648px;

      .item-content {
        box-sizing: content-box;
        background-color: #06324f;

        .item-title {
          background-image: url("../assets/images/big-screen/one-title-bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          color: #fff;
          font-size: 26px;
          font-weight: 400;
          height: 40px;
          line-height: 40px;
          padding: 8px 0px 8px 28px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            font-family: "Tx";
          }
        }

        .flex {
          display: flex;
          box-sizing: content-box;
          margin: 8px 28px;

          .item {
            box-sizing: content-box;

            .top {
              background-image: url("../assets/images/big-screen/two-title-bg.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 5px 0px;

              .title {
                font-family: "Tx";
                font-size: 24px;
                color: #fff;
                padding-left: 32px;
              }
            }

            .top1 {
              background-image: url("../assets/images/big-screen/three-title-bg.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 5px 0px;

              .title {
                font-family: "Tx";
                font-size: 24px;
                color: #fff;
                padding-left: 32px;
              }
            }

            .base-info {
              height: 361px;
              margin-top: 8px;

              .bridge-img {
                width: 100%;
                height: 175px;

                img {
                  width: 100%;
                  height: 100%;
                }

                .no-img {
                  text-align: center;
                  color: #ffffff;
                  font-size: 14px;

                  img {
                    width: 180px;
                    height: 100px;
                  }
                }
              }

              .bridge-name {
                font-weight: 600;
                font-size: 21px;
                color: #78dfff;
                margin: 0px 16px;
                padding: 10px 0px 16px 0px;
                border-bottom: 1px solid #2d5771;
              }

              .channel-info {
                display: flex;
                justify-content: space-between;
                font-weight: 500;
                font-size: 18px;
                color: #ffffff;
                margin: 16px;
              }

              .condition {
                height: 57px;
                background: linear-gradient(
                  90deg,
                  rgba(120, 223, 255, 0.02) 1%,
                  rgba(41, 191, 238, 0.31) 59%,
                  rgba(120, 223, 255, 0) 100%
                );
                border: 1px solid;
                border-image: linear-gradient(
                    360deg,
                    rgba(120, 223, 255, 0),
                    rgba(63, 207, 252, 0.81),
                    rgba(120, 223, 255, 0)
                  )
                  1 1;
                display: flex;
                justify-content: space-between;
                line-height: 57px;
                margin: 0 16px;
                font-weight: 500;
                font-size: 18px;
                color: #ffffff;
                padding: 0 16px;

                .condition-item {
                  display: flex;
                  align-items: center;

                  img {
                    width: 25px;
                    height: 23px;
                    margin-left: 4px;
                  }
                }
              }
            }

            .hole-info {
              height: 361px;
              background: rgba(120, 223, 255, 0.05);
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;
              margin-top: 8px;

              .hole-item {
                display: flex;
                justify-content: space-between;
                margin: 0 16px;
                padding: 24px 0 25px 0;
                border-bottom: 1px solid #2d5771;

                .name {
                  font-weight: 500;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.85);
                }

                .value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 21px;
                  color: #ffffff;
                }
              }

              .tips {
                text-align: center;
                font-weight: 400;
                font-size: 18px;
                color: rgba(255, 255, 255, 0.85);
                margin: 16px 0;
              }
            }

            .warning-situation {
              height: 361px;
              background: rgba(120, 223, 255, 0.05);
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;
              margin-top: 8px;
              display: flex;
              align-items: center;
              flex-wrap: wrap;

              .situation-item {
                width: 50%;
                text-align: center;
                position: relative;

                .value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 41px;
                  color: #f13939;
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  margin: auto;
                }

                .name {
                  font-weight: 500;
                  font-size: 18px;
                  color: #ffffff;
                }
              }
            }

            .water-situation {
              height: 361px;
              background: rgba(120, 223, 255, 0.05);
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;
              margin-top: 8px;
              display: flex;
              justify-content: center;
              align-items: center;

              .water-item {
                display: flex;
                align-items: center;

                img {
                  margin-right: 12px;
                }

                .name {
                  font-weight: 500;
                  font-size: 20px;
                  color: rgba(255, 255, 255, 0.85);
                }

                .value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 40px;
                  color: #ffffff;
                  display: flex;
                  align-items: center;

                  .actual {
                    font-weight: 500;
                    font-size: 16px;
                    color: rgba(40, 206, 142, 0.85);
                    background: rgba(40, 206, 142, 0.2);
                    border-radius: 4px;
                    padding: 6px 12px;
                    margin-left: 10px;
                  }
                }
              }
            }

            .recently {
              font-size: 18px;
              color: rgba(255, 255, 255, 0.85);
              margin: 24px 0px 24px 28px;

              span {
                color: #78dfff;
              }
            }

            .table {
              margin-top: 8px;
            }

            #no-data {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              display: none;

              .text {
                text-align: center;
                color: #ffffff;
                font-size: 14px;
              }
            }

            .bridge-accident {
              height: 369px;
              overflow: auto;
              .scroll-container {
                height: 4500px; /* 填充父容器 */
                overflow-y: auto; /* 允许垂直滚动 */
                animation: scroll 200s linear infinite; /* 添加自动滚动动画 */
              }
              @keyframes scroll {
                0% {
                  transform: translateY(0);
                }
                100% {
                  transform: translateY(-100%); /* 向上滚动100% */
                }
              }
              .custom-progress {
                width: 100%;
              }

              .bridge-accident-item {
                margin: 10px 0;

                .top-part {
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 8px;

                  .name {
                    font-weight: 400;
                    font-size: 14px;
                    color: #ffffff;
                  }

                  .value {
                    font-family: "Din";
                    font-weight: bold;
                    font-size: 18px;
                    color: #78dfff;
                  }
                }
              }

              .no-data {
                display: flex;
                justify-content: center;
                line-height: 369px;
                color: #ffffff;
                font-size: 28px;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }

  .my-iframe {
    .close-btn {
      font-family: "Tx";
      position: absolute;
      top: 40px;
      left: 1940px;
      color: #ffffff;
      font-size: 20px;
      background-image: url("../assets/images/big-screen/back-bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 236px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
  }
}

// 表单样式
:deep(.el-form-item__label) {
  color: #06283e;
}

:deep(.el-input__inner) {
  color: #78dfff;
  background: transparent;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
  box-shadow: 0 0 0 1px #06283e inset;
}

:deep(.el-range-editor--small .el-range-separator) {
  color: #78dfff;
}

:deep(.el-input__inner::placeholder) {
  color: #78dfff;
}

:deep(.el-select .el-input .el-select__caret.el-icon) {
  color: #78dfff;
}

:deep(.el-date-editor .el-range__icon) {
  color: #78dfff;
}

:deep(.el-range-input::placeholder) {
  color: #78dfff;
}

:deep(.el-range-editor--small .el-range-input) {
  color: #78dfff;
}

:deep(.el-cascader .el-input .el-input__suffix-inner .el-icon svg) {
  color: #78dfff;
}

:deep(.el-radio-button__inner) {
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: 1px solid #d9d9d9;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  color: #262626;
  background-color: #78dfff;
  border: 1px solid #78dfff;
}

:deep(.el-checkbox) {
  font-weight: 400;
  --el-checkbox-font-size: 18px;
  // color: rgba(255,255,255,0.65);
  color: #fff;
}

:deep(.el-checkbox__inner) {
  background-color: #d8d8d8;
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #78dfff;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  background-color: #78dfff;
  border-color: #78dfff;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #78dfff;
  border-color: #78dfff;
}

:deep(.el-checkbox__inner::after) {
  box-sizing: content-box;
  content: "";
  border: 1px solid black;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 50ms;
  transform-origin: center;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before) {
  content: "";
  position: absolute;
  display: block;
  background-color: black;
  height: 2px;
  transform: scale(0.5);
  left: 0;
  right: 0;
  top: 5px;
}

:deep(.el-date-editor .el-range__icon) {
  display: none;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: transparent;
  box-shadow: 0 0 0 1px #06283e inset;
}

:deep(.el-input.is-disabled .el-input__inner) {
  -webkit-text-fill-color: #78dfff;
}

:deep(.el-date-editor .el-range-input) {
  color: #78dfff;
}

:deep(.el-date-editor .el-range-separator) {
  color: #78dfff;
}

:deep(.el-input__prefix) {
  display: none;
}

//滚动条样式
::-webkit-scrollbar {
  width: 0px !important;
}

// 表格样式
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: #fff;
}

:deep(.el-table th) {
  background: rgba(1, 128, 240, 0.1);
  text-align: center;
}

:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  border: 0px;
  color: #fff;
  font-size: 14px;
  font-weight: Normal;
  padding: 4px 0;
  text-align: center;
}
:deep(.el-table tr:nth-child(odd)) {
  background-color: rgba(255, 255, 255, 0.05); /* 奇数行颜色 */
}

:deep(.el-table tr:nth-child(even)) {
  background-color: rgba(255, 255, 255, 0.1); /* 偶数行颜色 */
}
// 修改高亮当前行颜色
:deep(.el-table tbody tr:hover > td) {
  background: #063570 !important;
}

//去掉最下面的那一条线
.el-table::before {
  height: 0px;
}

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent;
}

//去掉表头下面的那一条线
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: 0;
}

:deep(.el-progress__text) {
  color: #ffffff;
}

:deep(.el-select__wrapper) {
  background-color: transparent;
  box-shadow: 0 0 0 1px #06283e;
}

:deep(.el-icon svg) {
  color: #78dfff;
}

:deep(.el-select__placeholder) {
  color: #78dfff;
  line-height: 32px;
}
::v-deep .el-select .el-select-dropdown {
  background-color: #8a1616 !important; /* 下拉菜单背景颜色 */
  border: 1px solid #06283e !important; /* 下拉菜单边框 */
}

::v-deep .el-select-dropdown .el-select-dropdown__item {
  background-color: #8a1616 !important; /* 下拉菜单选项背景颜色 */
  color: white !important; /* 选项文本颜色 */
}
:deep(.el-radio-group) {
  display: flex;
  flex-wrap: nowrap;
}

:deep(
    .el-radio-button.is-active
      .el-radio-button__original-radio:not(:disabled)
      + .el-radio-button__inner
  ) {
  color: #262626;
  background-color: #78dfff;
  border: 1px solid #78dfff;
}
.first-color {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 199, 51, 1);
  padding-right: 2px;
  position: relative;
  bottom: -18px;
  left: -13px;
}
.first-color1 {
  width: 8px;
  height: 8px;
  background-color: #78dfff;
  padding-right: 2px;
  position: relative;
  bottom: -18px;
  left: -13px;
}
.custom-progress {
  width: 100%;
  height: 8px; /* 设置高度 */
  background-color: rgba(255, 255, 255, 0.2);
  position: relative; /* 使子元素能够绝对定位 */
}

.progress-bar {
  height: 100%;
  overflow: hidden;
  border-radius: 0px 0px 0px 0px;
}
:deep(.el-select-dropdown) {
  background: yellow !important;
}

/* 第一个光效 */
.shimmer-container {
  width: 760px;
  height: 15px;
  background: linear-gradient(
    to right,
    rgba(0, 28, 67, -31.5),
    rgba(4, 76, 99, -1.3),
    rgba(0, 28, 67, -0.5)
  );
  overflow: hidden;
  position: absolute;
  z-index: 0;
  margin-left: -9px;
  margin-top: 42px;
  border-radius: 2px;
}

.shimmer-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -220px;
  width: 220px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 183, 255, 0) 0%,
    rgba(0, 183, 255, 0.4) 20%,
    rgba(95, 242, 255, 0.95) 50%,
    rgba(0, 183, 255, 0.4) 80%,
    rgba(0, 183, 255, 0) 100%
  );
  opacity: 1;
  transform: skewX(-30deg);
  animation: shimmer 2.5s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.8));
}

@keyframes shimmer {
  0% {
    left: -220px;
    filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(95, 242, 255, 0.8));
  }
  100% {
    left: 820px;
    filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.5));
  }
}

@media (max-width: 600px) {
  .shimmer-container {
    width: 85%;
    margin: 20px auto;
  }
  @keyframes shimmer {
    0% {
      left: -220px;
    }
    100% {
      left: calc(100% + 220px);
    }
  }
}
/* 第二个光效 */
.shimmer-container1 {
  width: 460px;
  height: 15px;
  background: linear-gradient(
    to right,
    rgba(0, 28, 67, -31.5),
    rgba(4, 76, 99, -1.3),
    rgba(0, 28, 67, -0.5)
  );
  overflow: hidden;
  position: absolute;
  z-index: 0;
  margin-left: -9px;
  margin-top: 42px;
  border-radius: 2px;
}

.shimmer-container1::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -220px;
  width: 220px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 183, 255, 0) 0%,
    rgba(0, 183, 255, 0.4) 20%,
    rgba(95, 242, 255, 0.95) 50%,
    rgba(0, 183, 255, 0.4) 80%,
    rgba(0, 183, 255, 0) 100%
  );
  opacity: 1;
  transform: skewX(-30deg);
  animation: shimmer 2.5s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.8));
}

@keyframes shimmer {
  0% {
    left: -220px;
    filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(95, 242, 255, 0.8));
  }
  100% {
    left: 820px;
    filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.5));
  }
}

@media (max-width: 600px) {
  .shimmer-container {
    width: 85%;
    margin: 20px auto;
  }
  @keyframes shimmer {
    0% {
      left: -220px;
    }
    100% {
      left: calc(100% + 220px);
    }
  }
}

@keyframes bigsize-rotate {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}
@keyframes bigsize-shadowMove {
  0% {
    background-position: 0% 50%;
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    background-position: 400% 50%;
    opacity: 0.6;
  }
} /* 专用于bigSizeScreen页面的魔法边框 */
.bigsize-magic-border {
  position: relative;
  overflow: hidden;
  border: none !important;
  background: rgba(5, 48, 68, 0.8);
  border-radius: 4px;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    padding: 2px;
    background: linear-gradient(
      90deg,
      #78dfff 0%,
      #5af5d5 25%,
      #33ebff 50%,
      #309cff 75%,
      #78dfff 100%
    );
    background-size: 400% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: bigsize-rotate 4s linear infinite;
    box-shadow: 0 0 25px rgba(120, 223, 255, 0.6);
    z-index: 1;
  }
  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 5%;
    bottom: -5px;
    width: 90%;
    height: 10px;
    filter: blur(15px);
    background: linear-gradient(
      90deg,
      #78dfff 0%,
      #5af5d5 25%,
      #33ebff 50%,
      #309cff 75%,
      #78dfff 100%
    );
    background-size: 400% 100%;
    animation: bigsize-shadowMove 4s linear infinite;
    opacity: 0.6;
  }
  &:hover::before,
  &:hover::after {
    animation-play-state: paused;
  }
} /* 确保内容在边框之上 */
.bigsize-magic-border > * {
  position: relative;
  z-index: 2;
} /* 折叠状态样式 */
.bigsize-magic-border.collapsed {
  min-height: 40px;
} /* 展开状态样式 */
.bigsize-magic-border.expanded {
  min-height: 80px;
}
</style>
